Css font bold style: CSS Property: font-weight | HTML Dog

Изменить CSS «bold» свойство font-weight value

Вопрос довольно простой.

Я использую Bootstrap, где все смелые вещи CSSized в

tag {
  font-weight: bold;
}

но я использую Open Sans (как и многие другие), где font-weight: 400 недостаточно, а font-weight: 700 намного лучше.

Есть ли способ сказать моему CSS, что bold=700 , а не 400 (что я считаю значением по умолчанию) ?

=====

EDIT

Должно быть, я не совсем понял.

Только в CSS, без изменения источников Bootstrap, есть много мест (весь список здесь), где bootstrap говорит (например.)

h6 {
  font-weight: bold
}

Я бы хотел, чтобы веб-браузер понимал, что в этом случае bold должно быть эквивалентно font-weight: 700 вместо font-weight: 400 по умолчанию без переписывания всех правил (например,)

h6 {
  font-weight: 700
}

Ответ может заключаться в том, что в настоящее время это невозможно, но Google пока не дал мне никакого ответа.

css

twitter-bootstrap

Поделиться

Источник

Augustin Riedinger    

22 августа 2013 в 12:01

2 ответа

• CSS: в чем разница между стилями «bolder» и «bold» font-weight?

  В чем разница между стилями font-weight: bolder; и font-weight: bold; ? Я никогда не встречал такого стиля до сегодняшнего дня, когда нашел его в файле CSS нашего проекта. Результат тот же визуально (проверено на Ubuntu 10.10, Firefox 3.6.15).

• CSS-является ли свойство font Weight необязательным?

  Я смотрел на какой-то код и увидел, что кто-то упомянул свойство font-weight в CSS font-weight: normal; Теперь я только что проверил W3Schools, и они сказали, что font-weight: normal-это значение по умолчанию. Значит ли это, что вам вообще не нужно писать эту строчку? Разве в этом нет…

3

если вы используете тег strong .

strong {
    font-weight: 700;
}

или , если вы выделяете элементы жирным шрифтом, используя font-weight:bold, почему бы и нет

elem {
    font-weight: 700;
}

Примечание: Как указывалось @Pavlo, жирный шрифт эквивалентен 700.

Поделиться

Kami    

22 августа 2013 в 12:07

2

Если вы используете Open Sans, я бы предположил, что вы используете @fontface — Не рекомендуется устанавливать вес шрифта с помощью свойства font-weight при использовании @fontface , если только вы не используете что-то вроде Typekit. Если вы размещаете свои собственные шрифты, я думаю, что добавление веса шрифта попытается добавить вес на шрифт, который имеет только один вес.

Open sans я часто использую, и я знаю, что он поставляется в нескольких весах, на которые вы ссылаетесь в своем стиле отдельно и звоните в зависимости от того, что вам нужно. Таким образом, вы просто ссылаетесь на opensans-bold или любой другой вес, который вы хотите.

Однако, используя шрифты из Google и т. Д., Я думаю, что веса шрифтов действительно работают.

Хорошая статья здесь

Поделиться

Doidgey    

22 августа 2013 в 12:27

Похожие вопросы:

изменить CSS где font-weight:800

Мне было интересно, есть ли способ изменить CSS на массу, где font-weight: 800, и заменить его на 700. У меня есть рабочий сайт, на который я захожу, и они изменили весь свой вес шрифта с ‘bold’ до…

Как правильно объявить CSS font-face с font-weight и font-style?

Я пытаюсь использовать свойство @font-face CSS для определения моих шрифтов ttf локально следующим образом: open-sans.css @font-face { font-family: ‘Open Sans’; src: url(‘OpenSans-Regular.ttf’)…

CSS переопределение для свойства ‘font-weight’

Я столкнулся со странной проблемой с переопределением CSS свойства ‘font-weight’. Ниже приведен код, показывающий проблему:- ‘font-weight’ для элемента ‘p’ устанавливается в значение small (точно…

CSS: в чем разница между стилями «bolder» и «bold» font-weight?

В чем разница между стилями font-weight: bolder; и font-weight: bold; ? Я никогда не встречал такого стиля до сегодняшнего дня, когда нашел его в файле CSS нашего проекта. Результат тот же визуально…

CSS-является ли свойство font Weight необязательным?

Я смотрел на какой-то код и увидел, что кто-то упомянул свойство font-weight в CSS font-weight: normal; Теперь я только что проверил W3Schools, и они сказали, что font-weight: normal-это значение по…

«font-weight: normal» не работает?

Я пытаюсь стилизовать некоторые ссылки так, чтобы они выглядели жирными, если их не посещали раньше, и выглядели как нормальные, если их посещали раньше. HTML: <a href=http://www.facebook.com/…

CSS: свойство font Weight не работает на семействе шрифтов, почему?

Тег <head> в моем файле html содержит этот вызов ссылки: <link href=https://fonts.googleapis.com/css?family=Lato:400,700 rel=stylesheet> Затем я продолжаю говорить: <style> body {…

Шрифт Google с font-weight: bold не имеет одинакового размера

У меня есть проблема с Google шрифтами и весом шрифта. Моя проблема заключается в том , что у меня есть div с редактируемым текстом контента, где пользователь может редактировать вес шрифта , но…

font-weight: bold! important переопределяется

Я столкнулся с ситуацией, когда мне нужно переопределить свойство font-weight. Однако, несмотря на то, что я использую !important для увеличения его приоритета, он все равно переопределяется другими…

css свойство font-weight не работает с кнопками

Я использовал шрифт ‘ubuntu’ из google fonts. Мне нужен font-weight: 300, но свойство font-weight button не работает. он остается смелым. <button type=button class=btn…

CSS font-weight

Пример

Задать разный вес шрифта для трех абзацев:

p.normal {
    font-weight: normal;
}

p.thick {
    font-weight: bold;
}

p.thicker {
    font-weight: 900;
}

Определение и использование

Свойство font-weight задает способ отображения толстых или тонких символов в тексте.

Поддержка браузера

Номера в таблице указывают первую версию браузера, которая полностью поддерживает свойство.

Синтаксис CSS

font-weight: normal|bold|bolder|lighter|number|initial|inherit;

Значения свойств

Похожие страницы

CSS Справочник: CSS Font

CSS Справка: font Свойство

HTML DOM Справочник: fontWeight Свойство

Свойство-сокращение font | Трепачёв Дмитрий

В предыдущем уроке мы с вами разобрали много
свойств для текста. Зачастую достаточно накладно
отдельно прописывать каждое из этих свойств,
поэтому в CSS для большего удоства существует
специальное свойство-сокращение font.
Данное свойство позволяет одновременно задать
размер шрифта, семейство, жирность, курсив
и межстрочный интервал.

Описываемое свойство имеет следующий синтаксис:

курсив жирность размер_шрифта / межстрочный_интервал семейство

При этом порядок свойств имеет значение,
и обязательными являются «размер_шрифта»
и «семейство». Обратите внимание на то, что
другие свойства, кроме описанных выше в синтаксисе,
не входят в данное свойство сокращение.

Давайте посмотрим на примерах.

Пример

Пусть у нас есть следующие стили:

p {
font-size: 16px;
font-family: Arial;
}

Давайте перепишем их через свойство-сокращение:

p {
font: 16px Arial;
}

Пример

Пусть у нас есть следующие стили:

p {
font-size: 16px;
font-family: Arial;
line-height: 50px;
}

Давайте перепишем их через свойство-сокращение:

p {
font: 16px/50px Arial;
}

Пример

Пусть у нас есть следующие стили:

p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
}

Давайте перепишем их через свойство-сокращение:

p {
font: bold 16px Arial;
}

Пример

Пусть у нас есть следующие стили:

p {
font-size: 16px;
font-family: Arial;
font-weight: bold;
line-height: 50px;
font-style: italic;
}

Давайте перепишем их через свойство-сокращение:

p {
font: bold italic 16px/50px Arial;
}

Практические задачи

Сократите код, используя свойство-сокращение
font:

p {
font-family: "Times New Roman";
font-size: 13px;
line-height: 20px;
}

Сократите код, используя свойство-сокращение
font:

p {
width: 300px;
font-family: Arial;
color: red;
font-size: 40px;
font-weight: bold;
}

Сократите код, используя свойство-сокращение
font:

p {
font-family: Arial;
font-size: 40px;
font-weight: bold;
text-indent: 50px;
font-style: italic;
line-height: 60px;
}

Свойства в CSS: шрифт | Шнайдер блог

2019 Посещений

Ранее мы уже разбирали общие вопросы по работе с текстом в CSS, настройку цвета и фона, стилизации цитат, а также текстовые эффекты с использованием тени. Теперь пришло время обратить внимание на еще один важнейший элемент 一 шрифт. Ключевые свойства:

• font-family 一 семейства используемого шрифта. Таких семейств может быть несколько (они прописываются через запятую в приоритетном порядке). Шрифты условно поделены на несколько групп:
• Serif 一 шрифты с засечками (к примеру, Times New Roman).
• Sans-serif 一 шрифты без засечек (Arial).
• Monospace 一 непропорциональный шрифт, все знаки которого имеют идентичную ширину (Courier New).
• Cursive 一 курсивные шрифты (Calisto MT).
• Fantasy 一 нестандартные шрифты (Torhok).

Например, если вы хотите сделать основным шрифтом Times New Roman, добавьте в таблицу стилей следующее:

Аналогично выставляются и другие шрифты:

Обратите внимание на то, что если на вашем компьютере нет того или иного шрифта, будет использован имеющийся из выбранной группы.

• font-style 一 стиль шрифта:
• normal (обычный).
• oblique (наклонный).
• italic (курсивный).

Например:

Аналогично “включаются” и другие стили шрифта. Если же вы хотите использовать все три варианта в разных параграфах, поступите следующим образом: задайте каждому параграфу уникальный ID (например, n, o, i) → задайте шрифт для всего текста:

Задайте каждому параграфу свой стиль:

В браузере:

• font-variant 一 свойство отвечает за варианты написания букв: обычный (normal) и малые прописные буквы (small-caps). По умолчанию установлен первый вариант, поэтому рассмотрим. как установить small-caps. Например:

В браузере:

• font-weight 一 толщина букв. В этом случае актуальны как числа (100, 200, 300, 400, 500, 600, 700, 800, 900), так и ключевые слова:

1. normal (нормальный) 一 ему соответствует число 400.
2. bold (полужирный) 一 ему соответствует число 700.
3. bolder (жирнее).
4. lighter (менее жирный).

Например: 

В браузере:

• font-size 一 размер шрифта. Данное свойство задается одним из трех способов:

1. Ключевые слова (xx-small, x-small, small, medium, large, x-large, xx-large, smaller, large).
2. Относительные единицы (%, em).
3. Единицы измерения длины (px, см, мм, пункты).

Подчеркнем, что от первого способа лучше воздержаться, так как браузеры по-разному отображают ключевые слова. Благодаря относительным единицам задаются размеры относительно элемента-предка. Что касается единиц измерения длины, то здесь стоит выделить следующие:

• px 一 равен точке на экране.
• em 一 равен высоте используемого шрифта.
• ex 一 равен высоте строчной “х” используемого шрифта.

Не стоит забывать и о пяти абсолютных диницах измерения: mm (один миллиметр), sm (один сантиметр), in (один дюйм), pt (1/72 дюйма), pc (⅙ дюйма). В силу различных обстоятельств рекомендуется использовать три параметра:

• pt 一 когда речь идет о фиксированном дизайне веб-портала).
• % 一для “резинового” веб-портала.
• em 一 для того, чтобы менять размер пропорционально.

Например, зададим общий размер параграфов 一 12 px, первый параграф увеличим на 30%,а третий уменьшим на 20%:

В браузере:

Как исправить проблему font-weight в состоянии hover

От автора: вы когда-нибудь пробовали изменить значение font-weight у ссылки в разных состояниях? Если да, то вы должны были заметить, что текст немного сдвигается. В этой статье мы сначала узнаем, что вызывает этот сдвиг, а затем рассмотрим два возможных решения данной проблемы.

Определяем проблему

Сначала давайте определим проблему на простом примере. Рассмотрим рисунок ниже:

Пункты меню – ссылки, т.е. в CSS будет что-то типа:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

a:hover {
font-weight: bold;
}

Зачастую пунктам меню не задается фиксированная ширина, а это значит, что при наведении курсора мыши, текст немного сдвинется. Это происходит из-за того, что ширина ссылки при наведении на нее увеличивается. Чтобы продемонстрировать это, добавим класс active к первой ссылке со следующими стилями:

.active {
font-weight: bold;
}

Мы также изменили текст второго пункта на первый, чтобы они были равны:

Теперь если открыть панель разработчика в браузере и навести курсор на первые две ссылки, можно заметить, что они не равны. Все сказанное выше можно наглядно посмотреть в демо:

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Надо сказать, что делать элемент жирным при наведении мыши не принято, но иногда может пригодиться.

Решение №1: задать всем пунктам ширину

Как говорилось выше, самый очевидный способ это задать всем пунктам меню ширину. В нашем примере мы задали ширину всех пунктов меню в 24%. Результат:

Этот способ работает, но он может не подойти нам. Есть случаи, когда нам нельзя добавлять фиксированную ширину элементов. Ну и на основе вышесказанного рассмотрим решение получше.

Решение №2: Text Shadow

Используя text-shadow, можно сымитировать эффект font-weight. Сделать это можно, правильно подобрав значение blur-radius.

В зависимости от используемых шрифтов в проекте можно скомбинировать свойства text-shadow и letter-spacing и создать красивые эффекты для текста. Чтобы продемонстрировать данный эффект, мы добавили пару строк CSS кода к нашим ссылкам:

a {
letter-spacing: .1em;
transition: text-shadow .3s;
}

a:hover {
text-shadow: 0 0 .65px #333, 0 0 .65px #333;
/* раскомментируйте строку ниже, если нужен более сильный эффект */
/* text-shadow: 0 0 .9px #333, 0 0 .9px #333, 0 0 .9px #333; */
}

Таким образом мы решили проблему со сдвигом текста, и нам не пришлось добавлять какую-либо ширину к элементам. И, как видите, данное решение намного лучше, чем font-weight, так как размер текста не изменяется вообще. Глазу намного приятнее.

Заключение

Если бы мне нужно было решить такую проблему, я воспользовался бы одним из двух представленных решений. А вы знаете какие-либо другие способы решения данной задачи? Пишите об этом в комментариях.

Автор: George Martsoukos

Источник: //www.sitepoint.com/

Редакция: Команда webformyself.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Толщина шрифта устарела в HTML5, но вот новый CSS »

Устарели, атрибуты HTML

Раскрытие: Ваша поддержка помогает поддерживать работу сайта! Мы зарабатываем реферальный сбор за некоторые услуги, которые мы рекомендуем на этой странице. Узнать больше

Атрибут

HTML Tag

Что означает вес шрифта , который устарел в HTML5, а вот новый CSS ?

Используется для обозначения веса (жирности) текста. Устарело.Вместо этого используйте CSS.

Элемент Font и его атрибуты устарели Этот атрибут устарел и не должен использоваться. Поддержка этого атрибута браузером ограничена, и его использование может привести к неожиданным результатам. Вместо этого используйте CSS. Узнайте больше, прочитав наше руководство по шрифтам и веб-типографике.

Свойство CSS font-weight указывает, насколько жирным должны быть символы. font-weight можно присвоить кратное 100 от 100 до 900 (900 — самый жирный).Так, например, это правило (добавленное в документ HTML в теге STYLE или во внешней таблице стилей) гласит, что элементы

должны иметь вес 900:

  h3 {font-weight: 900; }  

, что означает, что элемент

отображается следующим образом:

Weighty Matters

Вы также можете использовать слова «нормальный» (то же, что и 400), «жирный» (то же, что и 700), «Смелее» (относительное утверждение, означающее сделать текст более жирным, чем окружающий элемент) или «светлее» (сделать текст светлее окружающего элемента).Поскольку немногие шрифты имеют девять оттенков жирности, в большинстве шрифтов от 100 до 500 одинаковы, от 600 до 800 одинаковы, а 900 — самый жирный. Одним из ответвлений этого является то, что, хотя «нормальным» является 400, во многих случаях 100 на самом деле не легче. Если вы не используете гарнитуру с множеством доступных начертаний шрифта, нет практического способа представить текст с плотностью, меньшей, чем обычно. Чтобы узнать больше об этой теме, см. Наше руководство по шрифтам и веб-типографике.

Адам — ​​технический писатель, специализирующийся на документации и руководствах для разработчиков.

CSS font-weight Свойство

CSS font-weight Свойство

Свойство font-weight используется для установки жирности и толщины шрифта. Но есть некоторые шрифты, которые не задают все веса. Они доступны только для обычного или жирного шрифта.

Общие шрифты, такие как Arial, Helvetica, Georgia и т. Д., Не имеют веса, отличного от 400 и 700.

Синтаксис¶

  font-weight: normal | жирный | смелее | зажигалка | номер | начальная | наследовать;  

Пример свойства font-weight: ¶

  

  
    
    <стиль>
      п.смелее {
        font-weight: жирнее;
      }
    
  
  
    
 Пример свойства Font-weight 
    
 Мы использовали здесь более жирный текст. 
 
  

Попробуйте сами »

Результат¶

Пример свойства font-weight со всеми значениями: ¶

  

  
    
    <стиль>
      п.обычный {
        шрифт: нормальный;
      }
      p.lighter {
        font-weight: светлее;
      }
      p.bold {
        font-weight: жирный;
      }
      p.bolder {
        font-weight: жирнее;
      }
      p.fweight {
        font-weight: 600;
      }
    
  
  
    
 Пример свойства Font-weight 
    
 Мы использовали нормальный вес. 
    
 Это более легкий вес.
    
 Здесь мы использовали жирный шрифт. 
    
 Мы использовали здесь более жирный текст. 
    
 Здесь мы устанавливаем font-weight 600. 
  
  

Попробуйте сами »Ценности

¶

Практикуйте свои знания

Спасибо за отзыв!

Считаете ли вы это полезным? Да Нет

Статьи по теме

Мы используем файлы cookie для улучшения взаимодействия с пользователем и анализа посещаемости веб-сайта.Принимаю

шрифтов — CSS: выделение текста жирным шрифтом без изменения размера контейнера

Это очень старый вопрос, но я возвращаюсь к нему, потому что у меня была эта проблема в приложении, которое я разрабатываю, и я нашел здесь все необходимые ответы.

(пропустите этот абзац для TL; DR …) Я использую шрифт Gotham с сайта cloud.typography.com, и у меня есть кнопки, которые начинаются пустыми (с белой рамкой / текстом и прозрачным фоном) и приобретает цвет фона при наведении курсора.Я обнаружил, что некоторые из используемых мной цветов фона плохо контрастируют с белым текстом, поэтому я хотел изменить текст на черный для этих кнопок, но — из-за визуального трюка или обычных методов сглаживания — темный текст на светлом фоне всегда кажется более светлым, чем белый текст на темном фоне. Я обнаружил, что увеличение веса темного текста с 400 до 500 позволяет сохранить почти такой же «визуальный» вес. Тем не менее, он увеличивал ширину кнопки на крошечную величину — доли пикселя — но этого было достаточно, чтобы кнопки выглядели слегка «дрожащими», от чего я хотел избавиться.

Решение:

Очевидно, что это действительно привередливая проблема, поэтому требовалось придирчивое решение. В конечном итоге я использовал отрицательный межбуквенный интервал для более жирного текста, как рекомендовал cgTag выше, но 1 пиксель был бы излишним, поэтому я просто рассчитал именно ту ширину, которая мне нужна.

Изучив кнопку в Chrome devtools, я обнаружил, что ширина моей кнопки по умолчанию была 165,47 пикселей и 165,69 пикселей при наведении, разница в 0,22 пикселей. На кнопке было 9 символов, итого:

0.22/9 = 0,024444 пикселей

Преобразовав это в em-единицы, я смог сделать настройку независимой от размера шрифта. Моя кнопка использовала размер шрифта 16 пикселей, поэтому:

0,024444 / 16 = 0,001527em

Итак, для моего конкретного шрифта следующий CSS сохраняет кнопки точно одинаковой ширины при наведении курсора:

  .btn {
  font-weight: 400;
}

.btn: hover {
  font-weight: 500;
  межбуквенный интервал: -0.001527em;
}
  

Немного протестировав и используя приведенную выше формулу, вы сможете найти в точности правильное значение межбуквенного интервала для вашей ситуации, и оно должно работать независимо от размера шрифта.

Единственное предостережение заключается в том, что разные браузеры используют немного разные вычисления субпикселей, поэтому, если вы стремитесь к этому уровню OCD с идеальной точностью до субпикселей, вам нужно будет повторить тестирование и установить разные значения для каждого браузера. . Ориентированные на браузер стили CSS обычно не одобряются по уважительной причине, но я думаю, что это один из вариантов использования, в котором это единственный вариант, который имеет смысл.

Как стилизовать текстовые элементы с помощью шрифта, размера и цвета в CSS

Автор выбрал Diversity in Tech Fund, чтобы получить пожертвование в рамках программы Write for DOnations.

Введение

Cascading Style Sheets (CSS) — это язык, разработанный для двух дисциплин: программиста и дизайнера. Работа с текстом в сети — один из ярких примеров такой широкой доступности языка. Стилизация текста использует концепции из мира графического дизайна, но изменяет соглашения об именах для более широкой реализации.

Из этого туториала Вы узнаете о типографике web , искусстве стилизации текста.Подобно работе с печатным станком, вы разместите свой контент, примените визуальный стиль, чтобы помочь передать контент, и отрегулируете контент для разборчивости и выделения. Цель стилизации текста в Интернете — создать визуальную иерархию по цвету, размеру, форме и пространству. Таким образом, заголовки выделяются из подзаголовков, которые выделяются из абзацев. Эти концепции помогают сделать текст более читаемым и читаемым.

Вы начнете обучение с написания HTML-структуры, которая будет состоять из содержимого-заполнителя из Cupcake Ipsum.Вы будете работать с разными уровнями заголовков ( h2 — h6 ) и типами контента ( p , strong и em ) для применения нескольких свойств CSS, связанных с текстом, включая font-family , . font-size и цвет . Вы также загрузите пользовательские шрифты из Google Fonts, сторонней службы хостинга шрифтов. На каждом шаге этого руководства будет представлена ​​новая концепция или набор свойств, применяемых к контенту. К концу у вас будет веб-страница с индивидуальным стилем.

Предварительные требования

Настройка примера HTML

На этом первом шаге вы настроите HTML, который вы будете стилизовать на протяжении всей оставшейся части учебника. Цель HTML в этом руководстве — предоставить вам различные элементы и ситуации для практики стилизации.

Откройте файл index.html с помощью текстового редактора, например nano, Vim или Visual Studio Code. Добавьте следующий шаблонный HTML-код, чтобы предоставить файлу необходимый базовый код:

Индекс

.html

Элемент уже загружен в файл styles.css , поэтому обязательно подготовьте этот файл.

Затем вам нужно стилизовать контент. При создании текстовых стилей часто проекту нужны стили до того, как контент будет готов. В мире графического дизайна для этой цели используется заполнитель.Дизайнеры часто используют латинский текст в качестве заполнителя, известный как Lorem Ipsum. Есть много современных версий этого текста-заполнителя, в том числе Cupcake Ipsum. Это будет справочная копия, используемая во всем HTML.

Для начала HTML должен отображать иерархию , четкое различие и порядок содержимого. В HTML это делается с помощью тегов заголовков: от

, самого верхнего заголовка, до

, самого нижнего заголовка. Стандартные стили браузера для заголовков определяют визуальную иерархию только по размеру, при этом размер шрифта элемента

по умолчанию значительно больше, чем у

.В этом уроке вы будете использовать другие принципы дизайна, такие как цвет и пространство, чтобы обеспечить визуальную иерархию контента.

Чтобы создать этот иерархический контент, вы должны написать различные заголовки и заполнить каждый заголовок несколькими словами из Cupcake Ipsum в тегах в index.html . Вы будете следовать правильной семантике HTML , которая обеспечивает точное значение для браузера.

Чтобы иметь правильную семантику HTML:

• На странице будет только один элемент
  

  .Обычно это будет заголовок.

• Последующие уровни заголовков будут только на один меньший, равный или любой более высокий уровень. Например, единственный уровень заголовка, который идет после
  

  , будет либо

  , либо еще

  , либо

  , но никогда не будет

  или .

  .

Используя правила семантики заголовков, добавьте следующий выделенный HTML-код в index.html :

Индекс

.html

  ...
  
    
 Сахарная слива, чупа, чупс, шоколад, кекс, пончик 

    
 Макарун с овсяным пирогом "Тутси" 

    
 Датский пончик из желейных бобов тирамису 

    
 Зефир из теста с лимонными каплями 

    
 Пудинг для яблочного пирога 

    
 Пряничный датский 

    
 Морковный торт с леденцами на палочке мармеладные мишки 

    
 Лакричная конфета, леденцы, сахарная вата, лакрица 
  
...
  

Затем вам понадобится контент, чтобы заполнить пространство между заголовками. Это будут абзацы текста, обозначенные элементом

для хранения каждого абзаца. Снова используйте Cupcake Ipsum, чтобы сгенерировать этот контент и разместить абзацы по всей странице.

Добавьте выделенные части следующего блока кода. В этом руководстве для блоков кода будет использоваться следующий формат:

index.html

  ...
  
    
 Сахарная слива, чупа, чупс, шоколад, кекс, пончик 

    
 Макарун с овсяным пирогом "Тутси" 

    
 Конфеты "Джуджуб" брауни.Десертный пирог с рулетами из мармеладных конфет с сахарной ватой. Сахарная слива Обожаю кексы. Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. 

    
 Датский пончик из желейных бобов тирамису 

    
 Зефир из теста с лимонными каплями 

    
 Обожаю зефирные конфеты. Кунжутные булочки по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll шоколадная плитка.Макаруны Я люблю кексы, леденцы, сладкие булочки, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. 

    
 Пудинг для яблочного пирога 

    
 Пирог с яблочным пирогом Я обожаю бисквит с мармеладом, я люблю. Шоколадный торт, тирамису, суфле, порошок, карамель, я люблю мороженое. Драже солодки ириски желейные желейные зерна. Кунжут щелкает суфле из леденцов. Бисквитный пончик, медвежий коготь, мармелад, халва, печенье, миндальное печенье, лимонные капли. Тутси ролл драже печенье конфеты суфле драже кекс лакрица.

    
 Пряничный датский 

    
 Пудра драже кунжута щелкает леденцами желе-о. Халва имбирный чизкейк вафельный. Вафельный рулетик Я люблю Я люблю. Торт ириски я люблю. Сахарная вата в желе из сахарной ваты Я люблю ириски из конфет. Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. 

    
 Морковный торт с леденцами на палочке мармеладные мишки 

    
 Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, медвежий коготь.

    
 Лакричная конфета, леденцы, сахарная вата, лакрица 

    
 Кекс с пончиками, начинкой чупа чупс халва чупа чупс. Макарун гуди ролл кекс карамель шоколадный кекс имбирный пряник желе-о. Тирамису Я люблю маршмеллоу-желе-о Я люблю мармелад, конфеты мармеладные мишки. 
  
...
  

Наконец, добавьте , и комбинацию двух элементов вместе. Это предоставит примеры фраз, которые подчеркнуты в содержании:

Индекс

.html

  ...
    
 Макарун с овсяным пирогом "Тутси" 

    
 Конфеты "Джуджуб" брауни. Десертный пирог с рулетами из мармеладных конфет с сахарной ватой. Сахарная слива  Я люблю пирожные . Jelly-o gummi мишки маффин марципановые марципановые чизкейк пончик имбирный пряник I love. Кекс вафельный торт. 

    
 Датский пончик из желейных бобов тирамису 

    
 Зефир из теста с лимонными каплями 

    
 Обожаю зефирные конфеты. Кунжутные хлопья  по-датски. Шоколадный торт печенье желе-о тирамису халва брауни халва шоколадный шоколадный торт. Jelly-o caramels jujubes bonbon cupcake danish tootsie roll шоколадная плитка. Макаруны Я люблю кексы, леденцы, сладкие булочки, я люблю. Я люблю мороженое из конфет и маршмеллоу с круассанами. Я люблю мармеладных мишек. 

    
 Пудинг для яблочного пирога 

    
 Пирог с яблочным пирогом Я обожаю бисквит с мармеладом, я люблю. Шоколадный торт тирамису  суфле порошок карамель  Я люблю мороженое.Драже солодки ириски желейные желейные зерна. Кунжут щелкает суфле из леденцов. Бисквитный пончик, медвежий коготь, мармелад, халва, печенье, миндальное печенье, лимонные капли. Тутси ролл драже печенье конфеты суфле драже кекс лакрица. 

    
 Пряничный датский 

    
 Пудра драже кунжута щелкает леденцами желе-о. Халва имбирный чизкейк вафельный.   Вафельный булочек   Я люблю, я люблю. Торт ириски я люблю. Сахарная вата в желе из сахарной ваты Я люблю ириски из конфет.Чупа чупс чупа чупс карамельки мороженое халва конфеты шоколадный торт. Маршмеллоу морковный торт мармелад. 

    
 Морковный торт с леденцами на палочке мармеладные мишки 

    
 Шоколадный торт, сладкий рулет, пудинг, шоколадный торт, кекс, кекс, медвежий коготь. 

    
 Лакричная конфета, леденцы, сахарная вата, лакрица 

    
 Кекс с начинкой для пончиков   чупа-чупс халва   чупа-чупс. Макарун гуди ролл кекс карамель шоколадный кекс имбирный пряник желе-о.Тирамису Я люблю маршмеллоу-желе-о Я люблю мармелад, конфеты мармеладные мишки. 
...
  

Теперь, когда у вас есть HTML-код, сохраните index.html и откройте его в браузере, чтобы увидеть, как страница выглядит со стилями браузера по умолчанию:

Размер текста варьируется по всем элементам, при этом стили по умолчанию

и

меньше, чем текст

.

На этом этапе вы настраиваете HTML-контент, который будет стилизован на протяжении всей оставшейся части учебника.Затем вы будете работать со свойством font-family , узнаете о стеке шрифтов , списке шрифтов, которые может использовать браузер, и примените шрифты к различным элементам.

Использование семейства шрифтов

Свойство

Далее вы будете работать со свойством CSS font-family и загружать внешний файл шрифта из службы Google Fonts. Название этого свойства происходит от термина типографики, который описывает набор шрифтов и варианты этого шрифта, включая полужирные и курсивные версии.У шрифта может быть множество из этих вариаций, но все они могут быть частью одного и того же семейства шрифтов , с теми вариациями, которые называются свойствами font-weight и font-style .

Чтобы начать работу с семейством шрифтов , полезно разобраться в деталях его вариантов значений. Значением свойства font-family является список шрифтов, называемый стеком шрифтов. Стек шрифтов работает как резервная система. Рассмотрим следующее значение свойства font-family :

  семейство шрифтов: "Helvetica Neue", Helvetica, Arial, без засечек;
  

Браузер сначала определит, доступна ли Helvetica Neue для использования, либо в виде шрифта, установленного на компьютере, либо в виде шрифта, предоставленного веб-сайтом.Если браузер не находит шрифт Helvetica Neue, он переходит вниз по списку к Helvetica, а затем к Arial. Если браузер не может найти какой-либо из этих шрифтов, то последний шрифт в списке, sans-serif , будет использовать то, что браузер установил в качестве шрифта по умолчанию для шрифта стиля sans-serif .

Примечание. Стеки шрифтов лучше всего работают не тогда, когда шрифт не найден, а когда конкретный символ не найден в шрифте. Это особенно необходимо для случаев использования поддержки нескольких языков, когда один шрифт может не иметь набора символов, который покрывает потребности всех языков.Стек шрифтов может содержать резервный шрифт, который предоставляет специальные символы и визуальное восприятие, аналогичное основному шрифту в стеке.

Создайте файл с именем styles.css в том же каталоге, что и index.html . Откройте его в текстовом редакторе и добавьте шрифт по умолчанию для страницы:

.

styles.css

  body {
  семейство шрифтов: "Avenir Next", Calibri, Verdana, без засечек;
}
  

В этом коде вы начинаете с селектора типа body со свойством font-family .Затем для стека шрифтов вы начинаете с «Avenir Next» , который будет доступен в браузерах iOS и macOS. Avenir Next заключен в кавычки, потому что название шрифта состоит из двух слов. Следующий шрифт — Calibri для браузеров Windows. Обязательно ставьте запятую между каждым объявлением шрифта. Чтобы обеспечить более общий запасной вариант шрифта, вы затем используете Verdana , который был широко доступен на компьютерах с начала 2000-х годов. Наконец, поскольку все эти шрифты классифицируются как шрифты без засечек, вы добавляете браузер по умолчанию без засечек в качестве последней опции шрифта в стеке шрифтов.

Сохраните styles.css , затем откройте index.html в своем браузере. Вы найдете новый шрифт вместо шрифта браузера по умолчанию для содержимого. Если вы используете операционную систему Apple, Avenir Next будет отображаться в браузере. Если вы работаете в Windows, вместо этого будет выполнять рендеринг Calibri. На следующем изображении показано, как этот стек шрифтов выглядит в MacOS:

В этом разделе вы использовали свойство font-family для установки стека шрифтов по умолчанию для веб-страницы.Вы также настраиваете свойство font-family , которое применяется конкретно к текстовому содержимому заголовка. В следующем разделе вы будете использовать службу Google Fonts, чтобы загрузить файл пользовательского шрифта и использовать его на странице.

Загрузка пользовательских шрифтов с помощью Google Fonts

Теперь, когда вы использовали свойство font-family со шрифтами, уже установленными на вашем компьютере, пришло время загрузить шрифты из внешней службы. Это расширит диапазон шрифтов, которые вы можете использовать для стилизации текста.В этом разделе вы будете работать со службой Google Fonts, чтобы загрузить и использовать шрифт на веб-странице.

Браузеры могут загружать любой шрифт, если для этого браузера предоставляется соответствующий формат файла шрифта. Служба шрифтов, такая как Google Fonts, облегчает работу по определению и размещению шрифтов, предоставляя файлы CSS и шрифтов, необходимые для загрузки шрифта. Есть много других сервисов, таких как Google Fonts, но Google Fonts содержит лицензионные шрифты и шрифты с открытым исходным кодом и предлагает эту услугу бесплатно.

Для начала откройте в браузере fonts.google.com .

В Google Fonts вы можете выбирать из множества различных шрифтов. В этом руководстве будут использоваться два: Public Sans и Quicksand.

В поле поиска Google Fonts найдите Public Sans . Когда карточка шрифта появляется из результатов поиска, отображается предварительный просмотр шрифта. Щелкните карточку, чтобы перейти на страницу шрифта:

На странице шрифтов Public Sans будут перечислены все варианты шрифта.Они известны как весов , которые варьируются от 100 до 900. Для целей этого руководства найдите стили Regular (400) и Bold (700) и нажмите кнопку + Select this style next к каждому варианту стиля, а также их начертание курсивом.

Как только вы выберете первый стиль, появится выбранный семейный инструмент. Этот инструмент предоставит вам HTML и CSS, необходимые для использования этих шрифтов:

Выберите метод , чтобы загрузить шрифты в браузер и скопировать предоставленный HTML.Откройте index.html и добавьте код в элемент после loading styles.css . Не закрывайте Google Fonts, так как вы вернетесь к нему еще пару раз:

index.html

  ...

    
    

...
  

На этом этапе повторная загрузка index.html в вашем браузере не приведет к визуальным изменениям. Браузер загружает шрифт, но его необходимо добавить в стек шрифтов, чтобы применить шрифт к содержимому.

Вернитесь в Google Fonts, чтобы найти правило CSS, которое загружает Public Sans. Google Fonts предоставляет набор шрифтов Public Sans и шрифт браузера по умолчанию sans-serif с семейством шрифтов : 'Public Sans', sans-serif; . Поскольку у вас уже есть стек шрифтов с резервными шрифтами, все, что вам нужно взять из примера Google Fonts, — это имя для ссылки на Public Sans.

Используя существующий стек шрифтов в styles.css , замените Avenir Next и Calibri на Public Sans :

styles.css

  body {
  семейство шрифтов: "Public Sans", Verdana, sans-serif;
}
  

Теперь, когда объявлен базовый стек шрифтов, все шрифты на странице теперь являются Public Sans.

Одна из распространенных дизайнерских практик, позволяющих привлечь больше внимания к заголовкам, — использовать для заголовков шрифт, отличный от шрифта для основного текста.Чтобы применить это к своему собственному HTML, вернитесь в Google Fonts и выполните поиск «Quicksand». Это будет заголовок или шрифт display для элементов с

по

на странице.

После того, как вы нашли Quicksand, выберите карточку шрифта и добавьте полужирный шрифт (600) и полужирный (700) к выбранным шрифтам вместе с Public Sans. Google Fonts предоставит новый URL-адрес для загрузки всех выбранных шрифтов и вариантов.Замените предыдущее значение href на новую ссылку в файле index.html :

index.html

  ...

    
    " rel = "таблица стилей">

...
  

Теперь, когда Quicksand настроен для загрузки в браузере, вам нужно применить его к тегам заголовков.Вы добьетесь этого, добавив список селекторов CSS, разделенных запятыми, который называется селектором группы , в файл styles.css . В этом случае используйте стек шрифтов, предоставленный Google Fonts с Quicksand, а затем используйте шрифт браузера по умолчанию sans-serif :

styles.css

  ...
h2, h3, h4, h5, h5, h6 {
  семейство шрифтов: «Зыбучие пески», без засечек;
}
  

Сохраните изменения в файле styles.css и вернитесь в браузер, чтобы перезагрузить индекс .html . Не стесняйтесь закрыть Google Fonts на этом этапе. Когда браузер загрузится, вы увидите, что отображаются два шрифта. Теперь Quicksand присутствует во всех заголовках, а Public Sans — во всем остальном содержимом, включая содержимое, выделенное жирным шрифтом и курсивом.

В этом разделе вы загрузили два шрифта из службы Google Fonts и добавили эти шрифты к существующим стекам шрифтов. В следующем разделе будет рассмотрено использование вариантов шрифта, чтобы указать, когда и как применять полужирный и курсивный шрифт к шрифту.

Использование

font-weight и font-style Properties

В этом разделе вы будете использовать свойства font-weight и font-style , чтобы настроить внешний вид шрифта. Есть много причин использовать эти варианты, например, чтобы подчеркнуть содержание как часть руководства по стилю цитирования и обеспечить визуальные вариации.

Теперь, когда вы загружаете пользовательские шрифты из Google Fonts, вы можете приступить к точной настройке характеристик текста.Начиная со свойства font-weight , вы можете изменить толщину или тонкость отображения шрифта. Свойство font-weight имеет два общих значения: normal и bold . Нормальное значение — это значение по умолчанию font-weight для большей части текста в браузере. Значение жирным шрифтом — это значение по умолчанию font-weight для заголовков и элементов. Но для этого урока вам нужно будет использовать числовые значения вместо имени нормальных и жирных значений.

Числовые значения font-weight зависят от шрифта, который вы загружаете. Когда вы добавляли шрифт Public Sans из Google Fonts, вы выбрали толщину Обычный (400) и Полужирный (700). Цифры в скобках совпадают со значениями, необходимыми для ссылки и загрузки этого шрифта. Кроме того, значение font-weight для 400 является числовым эквивалентом нормального , например, 700 является числовым эквивалентом жирным шрифтом .Текст, использующий Public Sans, то есть все, кроме заголовков, автоматически использует эти веса.

В качестве альтернативы, выбор шрифтов Quicksand включал полужирный (600) и полужирный (700) шрифт. Значение 600 не имеет числового эквивалента и должно быть определено с использованием числового значения.

Вы начнете с установки font-weight всех заголовков для полужирного варианта 600 Quicksand. В файле styles.css найдите селектор групп со всеми значениями заголовков и добавьте шрифт font-weight: 600; Объявление в блок селектора:

стилей.css

  ...
h2, h3, h4, h5, h5, h6 {
    семейство шрифтов: «Зыбучие пески», без засечек;
    font-weight: 600;
}
  

После внесения этого изменения сохраните styles.css и повторно загрузите index.html в своем браузере. Вы увидите небольшое истончение заголовков по мере их изменения от значения 700 для Quicksand до значения 600 .

Теперь, когда вы настроили все элементы заголовка для использования веса Quicksand 600 , все еще есть места для использования варианта шрифта 700 .Для начала создайте селектор типа h4 в вашем файле styles.css и добавьте font-weight: 700; в блоке селектора:

styles.css

  ...
h4 {
    font-weight: 700;
}
  

Это изменение заставит h4 немного выделяться, поскольку теперь он более жирный, чем другие заголовки. По мере продвижения руководства вы будете вносить дополнительные изменения в стили h4 , чтобы они выделялись, но при этом сохраняли свой иерархический порядок.

Сохраните изменения в styles.css , а затем создайте новый селектор, нацеленный на текст, заключенный в теги и . В случае стилей, написанных до сих пор, этот вид текста будет выделен полужирным курсивом в варианте Public Sans. Вместо этого установите стили для использования стека шрифтов Quicksand.

Так как HTML, чтобы получить полужирный курсив, это ... , и ... , вам нужно будет создать селектор группы комбинаторов в файле styles.css , а затем применить свойство font-family с «Quicksand», без засечек как значение:

styles.css

  ...
сильный em,
em strong {
    семейство шрифтов: «Зыбучие пески», без засечек;
}
  

После внесения этого дополнения в файл styles.css сохраните его, а затем перезагрузите index.html в своем браузере.Текст, который был выделен полужирным курсивом, теперь использует Quicksand и выделен курсивом, хотя Google Fonts не предоставляет курсивную версию шрифта. Это называется faux italic , когда браузер понимает, что это содержимое должно быть курсивом по умолчанию, но поскольку курсивный вариант не определен, вместо этого он искусственно наклоняет текст.

Свойство для обработки того, выделен ли текст курсивом или нет, — font-style . Варианты значений для свойства стиля шрифта : нормальный и курсив .Вместо использования имитационного полужирного шрифта измените стили для этого селектора, чтобы он не выделялся курсивом. Добавьте к селектору группы strong em, em strong в файле styles.css свойство font-style со значением normal :

styles.css

  ...
сильный em,
em strong {
    семейство шрифтов: «Зыбучие пески», без засечек;
    стиль шрифта: нормальный;
}
  

Это изменит текст, выделенный полужирным курсивом, на полужирный шрифт Quicksand.

Сохраните изменения в styles.css и перезагрузите index.html в своем браузере, чтобы увидеть изменения:

Вы использовали свойства font-weight и font-style в этом разделе, чтобы применить вариации шрифта Quicksand, загруженного из Google Fonts. Затем вы воспользуетесь свойством font-size , чтобы создать более крупный и разборчивый текст с более четкой иерархией среди заголовков.

Использование

font-size Свойство

В этом разделе вы будете использовать свойство font-size для применения различных размеров шрифта к содержимому на всей странице.Размер текста - важный фактор при передаче информации. Текст хорошего размера легче читать, а заголовки подходящего размера помогают передать иерархию для облегчения беглого просмотра информации. Вы измените размер шрифта на всех элементов, созданных в index.html , чтобы сделать документ более читабельным.

Начните с установки размера шрифта по умолчанию для элемента body . Браузер по умолчанию font-size имеет размер 16px , но может быть полезно для большей разборчивости для многих шрифтов, если они будут немного больше.Откройте файл styles.css и добавьте размер шрифта : 18 пикселей; к корпусу элемент:

styles.css

  body {
    семейство шрифтов: "Public Sans", Verdana, sans-serif;
    размер шрифта: 18 пикселей;
}
...
  

Откройте index.html в своем браузере или обновите страницу. Изменение размера шрифта в элементе body изменило все шрифты на странице, увеличив их размер.

Размеры шрифта по умолчанию для элементов имеют относительный размер на основе родительского элемента, в данном случае элемента , с использованием процентного значения для размера шрифта.Использование формулы (цель / база) * 100% даст вам процентное значение, которое относительно базового размера шрифта, установленного в элементе .

Чтобы попробовать эту формулу, вы будете работать с установкой целевого размера шрифта для элемента

как 45px . Используя формулу, целевой размер составляет 45 пикселей , а базовый размер - 18 пикселей , поэтому формула для этого будет (45/18) * 100% , что составляет 250% .Это означает, что предполагаемый размер для

будет в 2,5 раза больше размера базового font-size .

Верните вам файл styles.css и добавьте селектор элементов для h2 и добавьте размер шрифта : 250%; свойство и значение для установки размера шрифта:

styles.css

  ...
h2 {
    размер шрифта: 250%;
}
...
  

Теперь, когда вы установили относительный размер шрифта для элемента

, примените ту же формулу к остальным элементам заголовка.Для каждого из них вы можете выбрать округление или сохранение полных десятичных значений. Также может быть полезно оставлять комментарии, объясняющие целевой размер или даже формулу.

Откройте файл styles.css и начните с добавления комментария после свойства h2 font-size , объясняющего отображаемый размер. Затем для каждого заголовка примените формулу так, чтобы h3 имел размер шрифта , эквивалентный 36px , h4 равнялся 32px , h5 to 26px , h5 to 22px , и, наконец, h6 до базового размера 18px .Размер по умолчанию для элемента

меньше, чем базовый размер, поэтому установка его на 100% гарантирует, что он не опустится ниже базового значения:

styles.css

  ...
h2 {
    размер шрифта: 250%; / * 45 пикселей * /
}

h3 {
    размер шрифта: 200%; / * 36 пикселей * /
}

h4 {
    размер шрифта: 177,78%; / * 32 пикселя * /
}

h5 {
    размер шрифта: 162,5%; / * 26 пикселей * /
}

h5 {
    размер шрифта: 122%; / * 22px * /
}

h6 {
    размер шрифта: 100%; / * 18 пикселей * /
}
...
  

Вернитесь в браузер и обновите индекс .html . Все заголовки увеличат свой размер шрифта до относительно размера шрифта по умолчанию , установленного в элементе . На следующем изображении показано, как это изменение отобразится в браузере:

На этом шаге вы использовали свойство font-size , чтобы изменить размер текста на веб-странице. Вы использовали концепцию дизайна размера, чтобы придать содержанию иерархию помимо стилей браузера по умолчанию. На следующем шаге вы продвинетесь к дизайну контента с помощью свойства color .

Использование свойства цвета

для выделения текста

В следующем разделе основное внимание уделяется свойству color CSS, использующему цвет для определения порядка и добавления смысла к содержимому. Цвет является одним из наиболее распространенных дизайнерских соображений, в частности, при определении различного значения текста. В этом разделе вы будете использовать именованных цветов для установки цвета текста. Именованные цвета - это набор предопределенных цветов, который вырос с годами; они соответствуют другим значениям веб-цветов, например, шестнадцатеричным цветовым кодам.В этом разделе будет использоваться список именованных цветов, который можно найти на странице Википедии о веб-цветах. Вы можете оставить страницу веб-цветов Википедии открытой в своем браузере для справки.

Как и в случае с размером шрифта , вы собираетесь установить цвет по умолчанию для всего документа. Это повлияет на весь контент на странице, так как цвет является унаследованным значением для большинства элементов. Важно помнить о цветовом контрасте, поскольку он способствует разборчивости, особенно когда речь идет о том, чтобы сделать Интернет доступным для всех уровней зрения.Поскольку цвет фона останется белым по умолчанию, использование жирных, более темных цветов является хорошим ориентиром. Если вы хотите узнать больше о дизайне с доступным цветовым контрастом, посмотрите эту короткую серию видео по этой теме.

Чтобы начать использовать color , вернитесь к файлу styles.css в текстовом редакторе. Как и в случае с разделом font-size , найдите селектор body и добавьте свойство color . Цвет текста по умолчанию в большинстве браузеров — черный.Для доступного цветового контраста важно, чтобы основной цвет оставался темным на светлом фоне. Используйте именованный цвет DarkSlateGray , который здесь только верблюжий регистр для удобочитаемости, но при желании может быть полностью строчным:

styles.css

  body {
    семейство шрифтов: "Public Sans", Verdana, sans-serif;
    размер шрифта: 18 пикселей;
    цвет: DarkSlateGray;
}
...
  

Сохраните файл styles.css и обновите index.html в своем браузере.Цвет содержимого изменится с черного на темно-сине-зеленый:

Теперь, когда основной цвет установлен, вы можете начать использовать другие цвета, чтобы обеспечить более визуальную иерархию. Начните с селектора h2 в файле styles.css и добавьте свойство color со значением Indigo :

.

styles.css

  ...
h2 {
    размер шрифта: 250%; / * 45 пикселей * /
    цвет: индиго;
}
...
  

Сохраните стили .css , вернитесь в браузер и обновите index.html . Текст

теперь имеет темно-фиолетовый цвет вместо темно-сине-зеленого цвета по умолчанию:

Затем вы примените цвета к другим заголовкам. Quicksand — это забавный закругленный шрифт, и вы используете необычный образец контента Cupcake Ipsum, поэтому создайте яркую и яркую цветовую схему, используя разные цвета для каждого заголовка. Вернитесь к styles.css и для каждого из селекторов заголовков добавьте свойство color и значение цвета.Для элемента h3 используйте MediumVioletRed , для h4 используйте LimeGreen , для h5 добавьте Chocolate , для h5 используйте Crimson , затем, наконец, для h6 используйте DeepSky Blue :

styles.css

  ...
h3 {
    размер шрифта: 200%; / * 36 пикселей * /
    цвет: MediumVioletRed;
}

h4 {
    размер шрифта: 177,78%; / * 32 пикселя * /
    цвет: салатовый;
}

h5 {
    размер шрифта: 162.5%; / * 26 пикселей * /
    цвет: шоколадный;
}

h5 {
    размер шрифта: 122%; / * 22px * /
    цвет: малиновый;
}

h6 {
    размер шрифта: 100%; / * 18 пикселей * /
    цвет: DeepSkyBlue;
}
...
  

После добавления свойств color к заголовкам сохраните styles.css и вернитесь в браузер, чтобы обновить index.html . Ваш контент теперь полон цвета:

С помощью свойства цвет вы узнали о именованных значениях веб-цветов и о том, как использовать цвет для придания значения.Вы также использовали свойство color , чтобы придать содержанию индивидуальность, добавив красочную палитру к содержанию веб-страницы.

Заключение

Работа с текстом — основная часть написания CSS для Интернета. Текст передает смысл не только в том, что он говорит, но и в том, как он выглядит. Используя инструменты, которые вы изучили с помощью свойств font-family , font-weight , font-style , font-size и color , вы можете управлять текстом, чтобы обеспечить содержательный контекст для вашего веб-сайта. .Эти свойства не ограничиваются заголовками, рассматриваемыми в этой статье: их можно использовать с любым элементом, содержащим текст.

Если вы хотите прочитать больше руководств по CSS, посетите нашу страницу темы CSS.

CSS Font Weight Property и полужирный стиль текста в HTML

Свойство веса шрифта CSS

Чтобы указать насыщенность или жирность шрифтов, используется свойство веса шрифта. В основном к тексту применяется полужирный, легкий и нормальный шрифт. Диапазон темноты очень от 100 до 1000.

Пример 1 — Код свойства толщины шрифта для выделения полужирного текста HTML

  
<стиль>
.a
{
font-Weight: жирный;
}

  
  
 Это шрифт по умолчанию для элемента абзаца. 
 Lorem ipsum urna condimentum pellentesque id nibh toror id aliquet. Ut pharetra sit amet aliquam id diam maecenas ultricies mattis.
  

 

В приведенном выше коде мы применяем жирный шрифт font-weight к элементу абзаца HTML.

Рис.1 — Пример свойства Font Weight для отображения текста жирным или сильным шрифтом

Как отобразить текст в HTML жирным шрифтом с помощью свойства CSS Font Weight

Вы также устанавливаете темноту шрифтов как ваше требование. Диапазон значений темноты от 100 до 1000. 100 — это более легкий вес для шрифтов, а 1000 — более темный вес для шрифтов. Если вам нужны полужирные шрифты, вам нужно установить значение от 600 до 1000 или вы также установите {font-Weight: bold; }.

Пример 2 — Свойство толщины шрифта с числовым значением для установки полужирного текста в HTML

  
<стиль>
.a
{
font-Weight: жирный;
}
.b
{
font-Weight: 800;
}

  
  
 Это шрифт по умолчанию для элемента абзаца. 
 Lorem ipsum d nibh tord aliquet. У фаре трасит аликум аликвэмид ди урна в условиях пел ниба и аликвета.
 Lorem ipsum d amet aliquam id di urna con dime nibh tord aliquet. Ut phare tra sit ce ultri cies mat tis. 
  

 

В приведенном выше коде мы применяем жирный шрифт font-weight двумя разными способами к элементу абзаца HTML.

Рис.2 — Пример текста HTML полужирным шрифтом

Свойство толщины шрифта с более светлым или маленьким числовым значением

Вы также установите более светлую темноту шрифтов в качестве требования. Диапазон более светлых темных оттенков от 100 до 500.Если вам нужны светлые шрифты, вам нужно установить значение от 100 до 500 или вы также установите {font-Weight: normal; } {font-Weight: light; }.

Пример 3 — Свойство толщины шрифта для установки обычного внешнего вида и восприятия текста

  
<стиль>
.a
{
font-Weight: светлее;
}
.b
{
font-Weight: 300;
}

  
  
 Это стиль шрифта по умолчанию для элемента абзаца.
 Lorem ipsum et phare tra. Ut phare tra amet ali quam ult um d amm ul sum d nib d nibh tortd aliqu. 
 Lorem ipsum d amet Lorem ipsum d nibh tord aliquet. Ut phare tra sit amet ali quam ultri cies mat tis. 
  

 

В приведенном выше коде мы применяем облегченный font-weight двумя разными способами к элементу абзаца HTML.

Рис.3 — Свойство веса шрифта с более светлым или маленьким значением. Пример

Свойства шрифта CSS, вероятно, являются одним из наиболее важных свойств документа

Шрифт CSS

CSS Свойства шрифта , вероятно, являются одним из наиболее важных свойств документа.Когда вы указываете шрифт в своем файле CSS, а конечный пользователь не имеет этого целенаправленного шрифта, установленного в его системе, браузер будет отображать текст со шрифтом по умолчанию, установленным в этой системе.

Как установить свойства шрифта CSS?

Вы можете установить несколько свойств шрифта в вашем файле CSS; font-family, font-size, font-style — это основные свойства шрифтов, которые пользователь может часто устанавливать.

семейство шрифтов

Используя свойство font-family, вы можете указать гарнитуру шрифта, отображающего текст.

тело {
семейство шрифтов: «Arial Black», «Arial Bold», Gadget, без засечек;
}
п {
семейство шрифтов: «Courier New», Courier, «Lucida Sans Typewriter», «Lucida Typewriter», моноширинный;
}

output

Вы можете установить более одного шрифта в свойствах font-family , браузер предпочтет первый, который конечный пользователь установил на своем компьютере. Важно отметить, что имена каждого шрифта нечувствительны к регистру .

размер шрифта

Свойство font-size позволяет изменять размер шрифта на больший или меньший. Вы можете использовать измерения CSS, такие как пиксели, em и процент, чтобы изменить размер шрифта.

Вы можете установить CSS font-size значений в абсолютных и относительных размерах. Абсолютный размер устанавливает фиксированный размер шрифта, а относительный размер устанавливает шрифт относительно окружающих элементов.

p {font-size: 20px;}

Пиксель (PX) — это наиболее часто используемая единица измерения размера, но если вы используете em, вы можете избежать проблем с изменением размера браузера.

p {font-size: 0.875em;}

em представляет текущий размер шрифта браузера, который 1em равен текущему размеру шрифта браузера. По сравнению с пикселем вы можете рассчитать размер em по следующей формуле: пикселей / 16 = em .

body {font-size: 100%;}

Вы можете изменить размер шрифта, используя процентные значения, font-size: 100%; означает, что размер шрифта соответствует текущему размеру шрифта браузера.Если вы хотите увеличить размер шрифта, вы можете увеличить процентное значение, а для уменьшения размера шрифта вы можете уменьшить процентное значение.

body {font-size: 200%;}

Приведенный выше код удвоит размер шрифта по сравнению с текущим размером шрифта браузера.

body {font-size: 50%;}

Приведенный выше код уменьшит размер шрифта вдвое по сравнению с текущим размером шрифта браузера.

стиль шрифта

CSS предоставляет два стиля шрифта, которые вы можете изменить: курсивный или наклонный

p {font-style: italic;}
h2 {font-style: oblique;}

Другие свойства шрифта:

font-weight

Если вы хотите, чтобы ваш шрифт был более толстым, вы можете использовать свойства font-weight.

p {font-weight: bold;}

Вы можете изменить значения начертания шрифта на нормальный, полужирный, жирный, светлее, 100, 200, 300, 400, 500, 600, 700, 800, 900.

p {font-weight: bolder;}
p {font-weight: 500;}

вариант шрифта

Свойство font-variant помогает вам изменить все строчные буквы, преобразованные в прописные, по сравнению с другим текстом преобразованные прописные буквы отображаются с меньшим размером шрифта, чем исходные прописные буквы.

p {font-variant: small-caps;}

Следующий исходный код объединяет большинство вышеупомянутых свойств в одном документе.

Этот абзац отображается размером 20 шрифта

Этот абзац отображается с размером шрифта меньше 80%

Этот абзац выделен шрифтом курсивом

В этом абзаце выделены жирным шрифтом

В этом абзаце заменить строчные буквы на прописные

выводит

классов CSS и

идентификаторов

Почему определенный стиль следует указывать только для определенных тегов? Классы и идентификаторы позволяют указать
особый стиль для множества тегов.С помощью классов и идентификаторов вы также можете определять разные стили для одного и того же тега HTML.

В этом руководстве основное внимание уделяется:

Классы

С помощью классов вы можете указать разные стили для одного и того же тега HTML.

Например, вы можете указать два абзаца, чтобы текст был разным цветом:

Пример:

стр. Зеленого {color: green;}
p.blue {color: blue;}

Чтобы указать тег как часть класса, вы должны использовать атрибут class внутри этого тега:

Пример:

Этот текст зеленый

Этот текст синий

Стили для классов указываются с расширением.(точка), за которым следует имя класса во внутренней или внешней таблице стилей.

Пример:

В приведенном выше примере для текста класса задан тип шрифта тахома, размер шрифта 16 пикселей, жирный шрифт и зеленый цвет. Любой тег, указанный как часть текстового класса, получит эти свойства.

На основе таблицы стилей сверху:

Этот текст будет зеленым, полужирным, тахома и размером шрифта 16 пикселей

Будет отображаться как:

Этот текст будет зеленым, полужирным, тахома и размером шрифта 16 пикселей

ПРИМЕЧАНИЕ: Начинайте имена классов только с букв, а не с цифр.Имена классов, начинающиеся с цифр, не работают в браузерах Mozilla / Firefox.

ID

Идентификаторы указываются с помощью символа # (знак фунта), за которым следует имя идентификатора во внутренней или внешней таблице стилей.

Пример:

В этом примере для текста ID задан шрифт georgia, размер шрифта 18 пикселей, жирный шрифт и синий цвет.Любой тег, указанный как часть текстового идентификатора, получит эти свойства.

На основе таблицы стилей сверху:

Этот текст будет синим, полужирным, грузия, а размер шрифта — 18 пикселей

Будет отображаться как:

. Этот текст будет синим, полужирным, грузия, а размер шрифта — 18 пикселей

.

ПРИМЕЧАНИЕ: Начинайте имена идентификаторов только с букв, а не с цифр. Имена идентификаторов, начинающиеся с цифр, не работают в браузерах Mozilla / Firefox.