Семейства шрифтов в CSS: списки самых популярных семейств шрифтов.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Font families</title> <style> h2 { color: green; } #p1 { font-family: Times, "Times New Roman", serif; } #p2 { font-family: Helvetica, Arial, sans-serif; } #p3 { font-family: serif; } #p4 { font-family: sans-serif; } #p5 { font-family: monospace; } #p6 { font-family: cursive; } #p7 { font-family: fantasy; } .s1 { font-style: italic; } .s2 { font-style: oblique; } .s3 { font-weight: bold; } .s4 { font-weight: 100; } </style> </head> <body> <h1>Font Families</h1> <p>Used with CSS. Two common font combination lists and the five generic fallback font families.</p> <h2>font-family: Times, "Times New Roman", serif</h2> <p id="p1"> Behold! A serif font family list! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> <h2>font-family: Helvetica, Arial, sans-serif</h2> <p id="p2"> Behold! A sans-serif font family list! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> <h2>font-family: serif</h2> <p id="p3"> Behold! The serif generic font family! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> <h2>font-family: sans-serif</h2> <p id="p4"> Behold! The sans-serif generic font family! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> <h2>font-family: monospace</h2> <p id="p5"> Behold! The monospace generic font family! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> <h2>font-family: cursive</h2> <p id="p6"> Behold! The cursive font family! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> <h2>font-family: fantasy</h2> <p id="p7"> Behold! The fantasy generic font family! <span class="s1">It swooshes with an italic font-style!</span> <span class="s2">It leans with an oblique font-style!</span> <span class="s3">It puffs out with a bold font-weight!</span> <span class="s4">It sucks in with a 100 font-weight!</span> </p> </body> </html>
Страницы в тему:
- Размеры шрифта
- Текст (Урок CSS для начинающих)