Жирний шрифт в css
Здавалося б, навіщо використовувати CSS для завдання жирного шрифту, адже в html є спеціальний тег - , відповідальний за щільність тексту. Більш того, є його альтернатива - тег .
Але ж ми знаємо, що зовнішнє оформлення сайту потрібно виконувати через CSS, а HTML потрібен тільки для структурування даних веб-сторінки. Більш того, прийнято вважати що пошуковики передають більшу увагу словам поміченим вищеназваними тегами, а також тегами і .
Отже, занадто часте їх використання може викликати гнів пошукових систем по відношенню до вашого сайту. Загалом, ви можете втратити свої позиції через зайву переоптімізаціі. Виходячи з цього, і не тільки, в даному CSS уроці ми вчимося міняти жирність шрифту.
Властивість, що відповідає за щільність тексту
Щільність тексту ми міняємо за допомогою властивості font-weight. Воно має досить багато значень, і серед них є лише два більш-менш тямущих. Я говорю так, тому що на практиці ви найчастіше будете використовувати два значення - normal і bold. Перше відповідає за відображення тексту з нормальною, звичної товщиною, а друге - з напівжирної. Наприклад, давайте виділимо всі параграфи напівжирним шрифтом.
Як бачите, все досить просто. А тепер, давайте відобразимо заголовки другого і третього рівнів шрифтом нормальної товщини.
Ви ж пам'ятаєте, що заголовки за замовчуванням відображаються напівжирним шрифтом? Так ось, за допомогою CSS правила вище ми змінили це положення речей. Адже не дарма кажуть, що потрібно мислити нестандартно.
Отже, на цьому можна було б даний урок закінчити і побити мій особистий рекорд по найкоротшому посту на блозі. Але, я вирішив залишити цю затію на потім і розповісти вам про інших значеннях властивості font-weight.
товщина шрифтів
Як ви пам'ятаєте з уроку по підключенню шрифтів. вони у нас бувають різної товщини і нахилу. За щільністю шрифти мають показники від 100 до 900, де 100 - найтонший, а 900 - самий жирний.
Нормальний шрифт, який ми звикли бачити щодня має товщину 400, що еквівалентно значенням normal. Таким чином, ми можемо вказувати як значення normal, так і 400, різниці ніякої немає. Наприклад, давайте задамо заголовку першого рівня шрифт нормальної товщини.
Те, що ми звикли називати жирним шрифтом має товщину 700, і насправді є напівжирним, а також повністю відповідає значенню bold.
Виходить що замість значення bold ми можемо задавати товщину в 700. Наприклад, давайте відобразимо всі посилання напівжирним шрифтом.
Відмінно. Також хотілося б нагадати, що для відображення тексту тієї чи іншої щільністю необхідна наявність відповідних файлів даного шрифту. Наприклад, при підключенні до сайту шрифту тільки з нормальною товщиною, її відображення в тонкому варіанті не буде можливості, навіть якщо ви створите +100500 CSS правил.
Для наочності можна перейти до сервісу google.com/fonts і підключити через директиву @import який-небудь шрифт тільки з нормальною і напівжирної товщиною.
Потім спробувати вивести її на екран в щільності рівному 300.
Однак, це нічого не дає, так як на сервері і на комп'ютері користувача відсутня файл шрифту Open Sans з тонким шрифтом. Для більшої переконливості давайте підключимо файл шрифту з товщиною в 300 (тонкий) і застосуємо його до всіх параграфів.
Після цього, цілком очікувано всі параграфи будуть відображатися тонким шрифтом. Ще раз повторюся, що найчастіше використовуються шрифти нормальної і напівжирної товщини, тому про всі інші можете не турбуватися.
Але якщо раптом з'явиться необхідність задіяти котрусь із них, тепер ви знаєте як це зробити. А на цьому у мене все. Сподіваюся, цей урок по CSS був для вас корисний. Якщо це так:
На цьому я з вами не прощаюсь. Дякую за увагу і до зустрічі в наступних публікаціях!