A webes biztonságos betűtípusok olyan betűtípusok, amelyek univerzálisan telepítve vannak minden böngészőben és eszközön.
Nincsenek azonban 100%-ban teljesen webbiztonságos betűtípusok. Mindig van a annak esélye, hogy a betűtípus nem található, vagy nincs megfelelően telepítve.
Ezért nagyon fontos, hogy mindig tartalék betűtípusokat használjunk.
Ez azt jelenti, hogy hozzá kell adnia a hasonló "mentés betűtípusok" listáját a font-family ingatlan. Ha a Az első betűtípus nem működik, a böngésző megpróbálja a következőt, és a következőt, és így tovább. A listát mindig egy általános betűtípus-családnévvel fejezze be.
Itt három betűtípus létezik: Tahoma, Verdana és sans-serif. A második és harmadik betűtípus biztonsági másolat, arra az esetre, ha az első nem található.
p {
font-family: Tahoma, Verdana, sans-serif;
}Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>CSS Fallback Fonts</h1>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Az alábbi lista a legjobb web biztonságos betűtípusokat tartalmazza HTML és CSS számára:
Megjegyzés: Mielőtt közzétenné webhelyét, mindig ellenőrizze, hogyan A betűtípusok különböző böngészőkön és eszközökön jelennek meg, és mindig használatosak tartalék betűtípusok!
Az Arial a legszélesebb körben használt betűtípus online és nyomtatott médiában egyaránt. Arial a Google Dokumentumok alapértelmezett betűtípusa is.
Az Arial az egyik legbiztonságosabb webes betűtípus, és minden nagyobb operációs rendszeren elérhető.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Verdana nagyon népszerű betűtípus. A Verdana még kis betűméret esetén is könnyen olvasható.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Tahoma betűtípusnál kevesebb hely van a karakterek között.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Trebuchet MS-t a Microsoft tervezte 1996-ban. Óvatosan használja ezt a betűtípust. Nem minden mobil operációs rendszer támogatja.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Trebuchet MS', sans-serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Times New Roman az egyik legismertebb betűtípus a világon. Úgy néz ki professzionális, és számos újságban és "híroldalon" használják. Ez egyben a elsődleges betűtípus a Windows-eszközökhöz és -alkalmazásokhoz.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Times New Roman', serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Georgia egy elegáns serif betűtípus. Nagyon jól olvasható különböző betűméretekkel, így jó jelölt a mobil-reszponzív kialakításhoz.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Garamond egy klasszikus betűtípus, amelyet számos nyomtatott könyvhöz használnak. Időtlensége van megjelenés és jó olvashatóság.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Courier New a legszélesebb körben használt monospace serif betűtípus. A Courier Newt gyakran használják kódoló kijelzőkkel és számos e-mail-szolgáltatóval használja alapértelmezett betűtípusként. A Courier New a filmek szabványos betűtípusa is forgatókönyvek.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Courier New', monospace;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
A Brush Script MT betűtípust úgy tervezték, hogy utánozza a kézírást. Elegáns és kifinomult, de nehezen olvasható. Használja óvatosan.
Lorem ipsum dolor sit amet.
0 1 2 3 4 5 6 7 8 9
Próbálja ki Ön is →
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: 'Brush Script MT', cursive;
}
</style>
</head>
<body>
<h1>Lorem ipsum dolor sit amet</h1>
<p>Lorem ipsum dolor sit amet.</p>
<p>0 1 2 3 4 5 6 7 8 9</p>
</body>
</html>
Tipp: Tekintse meg az összes elérhető Google-betűtípust és azok használatát.