Свойство font-weight позволяет задавать толщину букв. Возможные значения:
- lighter — тонкие буквы;
- normal — обычные буквы;
- bold — толстые буквы;
- bolder — совсем толстые буквы;
- Одно из числовых значений: 100, 200, 300, 400, 500, 600, 700, 800, 900.
Тут надо признать, что шрифты, использующиеся по умолчанию в браузерах, могут отображать только normal и bold. Значение lighter для них ничем не отличается от normal, а значение bolder ничем не отличается от bold. Поэтому я бы советовал использовать только значения normal и bold.
Пример:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 |
<!DOCTYPE html> <html> <head> <title>Пример использования CSS-свойства font-weight</title> <meta http-equiv="Content-Type" content="text/html;charset=utf-8" > </head> <body> <p> <a href="https://urvanov.ru/2015/10/30/%D1%81%D0%B2%D0%BE%D0%B9%D1%81%D1%82%D0%B2%D0%BE-font-weight-%D0%B2-css/">Статья с описанием свойства font-weight в CSS</a> </p> <p> Большинство шрифтов, используемых по умолчанию поддерживают только два варианта толщины: normal и bold! Поэтому lighter похож на normal, а bolder похож на bold и т. д. </p> <p style="font-weight:lighter;"> Пример font-weight:lighter; </p> <p style="font-weight:normal;"> Пример font-weight:normal; </p> <p style="font-weight:bold;"> Пример font-weight:bold; </p> <p style="font-weight:bolder;"> Пример font-weight:bolder; </p> <p style="font-weight:100;"> Пример font-weight:100; </p> <p style="font-weight:200;"> Пример font-weight:200; </p> <p style="font-weight:300;"> Пример font-weight:300; </p> <p style="font-weight:400;"> Пример font-weight:400; </p> <p style="font-weight:500;"> Пример font-weight:500; </p> <p style="font-weight:600;"> Пример font-weight:600; </p> <p style="font-weight:700;"> Пример font-weight:700; </p> <p style="font-weight:800;"> Пример font-weight:800; </p> <p style="font-weight:900;"> Пример font-weight:900; </p> </body> </html> |