Ce sunt fonturile web sigure?
Un font este considerat web sigur atunci când este instalat pe aproape toate browserele și dispozitivele.
Fonturi de Rezervă
Niciun font nu este complet web sigur, deoarece oricare poate lipsi sau poate fi instalat greșit. De aceea ar trebui să folosești întotdeauna fonturi de rezervă.
În proprietatea font-family, enumeră în ordine fonturi de rezervă asemănătoare: când unul nu funcționează, browserul trece la următorul. O familie generică de fonturi ar trebui să fie întotdeauna ultima.
Exemplu
Aici Tahoma este primul, urmat de Verdana ca rezervă și apoi de un sans-serif generic.
<style> intern, dați unui <p> font-family: Tahoma, Verdana, sans-serif, unde al doilea și al treilea sunt de rezervă. Adăugați un paragraf.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
p {
font-family: Tahoma, Verdana, sans-serif;
}
</style>
</head>
<body>
<p>If Tahoma is not available, the browser falls back to Verdana, then to a generic sans-serif font.</p>
</body>
</html>
Fonturi web sigure pentru HTML și CSS
Mai multe fonturi web sigure se remarcă pentru HTML și CSS. Dintre fonturile sans-serif: Arial, Verdana, Tahoma și Trebuchet MS. Dintre fonturile serif: Times New Roman, Georgia și Garamond. Pentru monospace, Courier New, iar pentru cursive, Brush Script MT.
Notă: Testează-ți fonturile pe diferite browsere și dispozitive înainte de publicare și nu renunța niciodată la fonturile de rezervă.
Arial (sans-serif)
Niciun font nu este mai utilizat în media online și tipărită decât Arial, pe care și Google Docs îl folosește ca font implicit. Toate sistemele de operare majore îl au, ceea ce îl face unul dintre cele mai sigure fonturi web.
Exemplu
Text de exemplu afișat în Arial.
<style> intern, setați font-family al unui <div> la Arial, sans-serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Arial, sans-serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Verdana (sans-serif)
Chiar și la dimensiuni mici, foarte popularul Verdana rămâne lizibil.
Exemplu
Text de exemplu afișat în Verdana.
<style> intern, setați font-family al unui <div> la Verdana, sans-serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Verdana, sans-serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Tahoma (sans-serif)
În Tahoma, caracterele stau mai aproape unele de altele, cu mai puțin spațiu între ele.
Exemplu
Text de exemplu afișat în Tahoma.
<style> intern, setați font-family al unui <div> la Tahoma, sans-serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Tahoma, sans-serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Trebuchet MS (sans-serif)
Microsoft a proiectat Trebuchet MS în 1996. Nu toate sistemele de operare mobile îl suportă, așa că folosește-l cu grijă.
Exemplu
Text de exemplu afișat în Trebuchet MS.
<style> intern, setați font-family al unui <div> la "Trebuchet MS", sans-serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Trebuchet MS", sans-serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Times New Roman (serif)
Puține fonturi din lume sunt la fel de ușor de recunoscut ca Times New Roman. Aspectul său profesionist l-a făcut obișnuit în ziare și pe site-urile de știri și este livrat împreună cu Windows.
Exemplu
Text de exemplu afișat în Times New Roman.
<style> intern, setați font-family al unui <div> la "Times New Roman", serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Times New Roman", serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Georgia (serif)
Faptul că se citește bine la diferite dimensiuni face din elegantul font serif Georgia o alegere bună pentru design-ul responsive pentru mobil.
Exemplu
Text de exemplu afișat în Georgia.
<style> intern, setați font-family al unui <div> la Georgia, serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Georgia, serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Garamond (serif)
Multe cărți tipărite sunt culese în clasicul Garamond, cunoscut pentru aspectul său atemporal și lizibilitatea bună.
Exemplu
Text de exemplu afișat în Garamond.
<style> intern, setați font-family al unui <div> la Garamond, serif. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: Garamond, serif;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Courier New (monospace)
Dintre fonturile serif monospace, Courier New este cel mai utilizat. Îl vei vedea adesea în cod, mulți furnizori de e-mail îl folosesc implicit, iar scenariile de film îl au ca font standard.
Exemplu
Text de exemplu afișat în Courier New.
<style> intern, setați font-family al unui <div> la "Courier New", monospace. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Courier New", monospace;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>
Brush Script MT (cursive)
Scrisul de mână a fost modelul pentru Brush Script MT. Eleganța sa are un cost, deoarece poate fi greu de citit, așa că folosește-l cu grijă.
Exemplu
Text de exemplu afișat în Brush Script MT.
<style> intern, setați font-family al unui <div> la "Brush Script MT", cursive. În interior, adăugați un titlu, o linie de text și cifrele 0-9.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
div {
font-family: "Brush Script MT", cursive;
}
</style>
</head>
<body>
<div>
<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>
</div>
</body>
</html>