Шрифты CSS

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

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

В CSS стилях для текстового содержимого предоставляются несколько свойств шрифта:font-family，font-style，font-variant，font-weightиfont-size. В следующем разделе мы рассмотрим эти свойства逐一.

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

Этаfont-familyCSS-свойство позволяет вам установить имя семейства шрифта текстового содержимого, список приоритетов используемых шрифтов.

Этаfont-familyСвойство может содержать несколько названий шрифтов в качествеРезервныйШрифт. Сначала перечислите необходимые шрифты, затем все шрифты (если они недоступны). Если браузер не поддерживает первый шрифт, он试试 следующий. Декларация семейства шрифтов может выглядеть так:

p　{
　　　　font-family: "Times New Roman", Times, serif;
}

узнайте больше о распространенных сочетаниях шрифтов; проверьте безопасные шрифты в Интернете.

стиль шрифта

Черезfont-styleСвойство устанавливает стиль шрифта текстового содержимого элемента.

Возможные значения этого свойства:normal，italicилинаклонный。

p.one {
　　　　font-style: нормальный;
}
p.two {
　　　　font-style: курсив;
}
p.three {
　　　　font-style: наклон;
}

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

font-sizeСвойство устанавливает размер шрифта текстового содержимого элемента.

Существует несколько способов指定字体大小的值，например, использование ключевых слов, пикселей или ems.

使用关键字设置字体大小

通过在body元素上设置关键字字体大小，可以在页面上其他任何地方设置相对字体大小，从而可以轻松地在整个页面上相应地缩放字体。使用以下关键字之一指定一个绝对的大小：Использование ключевых слов для установки размера шрифта，можно установить относительный размер шрифта в других местах на странице, установив ключевое слово размера шрифта в элементе body, что позволяет легко масштабировать шрифт на всего веб-сайте. Используйте одно из следующих ключевых слов для установки абсолютного размера:，xx-small，x-small，small，medium，large。

x-largexx-largeотносительные размеры задаются одним из следующих ключевых слов:smaller。

body　{
　　　　、、
}
2em=32px
　　　　larger
}
p　{
　　　　font-size:　large;
}

font-size:　larger;

font-size:　smaller;

2em=32px
　　　　Использование пикселей для установки размера шрифта
}
p　{
　　　　Когда необходимо точное значение в пикселях, установите размер шрифта в пикселях (например, 12px, 16px и т.д.). Однако, результаты могут отличаться в зависимости от браузера, так как они используют различные алгоритмы для достижения аналогичного эффекта.
}

font-size:　24px;

Инструмент масштабирования

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

свойство, значение которого динамично. ОпределениеИспользование Em для установки размера шрифтаfont-sizeединицей измерения является размер шрифта родительского элемента. свойство, значение которого динамично. Определениеem

равен размеру шрифта, примененному к родительскому элементу.font-sizeЕслиУстановить a в элементе body в 20px, тои1em=20px。

2em=40pxЕсли вы не установили размер шрифта ни в одном месте на странице, то он будет значением по умолчанию браузера, что составляет 16px. Таким образом, по умолчанию этои1em=16px。

2em=32px
　　　　h1　{
}
p　{
　　　　font-size:　2em;　　　　/*　32px/16px=2em　*/
}

IE6 и IE7 увеличивают размер текста после его изменения в размерах. (Прежде чем发布, проведите тестирование).

Решение, использующее комбинацию процентов и emfont-sizeОдна из популярных техник для установления аналогичного эффекта во всех браузерах - этоfont-sizeУстановить значение для body62,5%Это равно 10px или 0.625em (т.е. 62,5% от 16px).

Теперь вы можете установитьfont-sizeThrough the use of any element in the em unit, there is an easy-to-remember conversionpxThrough the 10 value in this way10px=1em，12px=1.2em，14px=1.4em，16px=1.6emи т.д. См. следующий пример:

body　{
　　　　font-size:　62.5%;　　　　/*　font-size　1em　=　10px　*/
}
p　{
　　　　font-size:　1.6em;　　　　/*　1.6em　=　16px　*/
}

Толщина шрифта

font-weightСвойство определяет толщину или жирность шрифта.

Возможные значения свойства font-style:normal，bold，bolder，lighter，100，200，300，400，500，600，700，800，900иinherit。

• числовые значения100- 900Указание толщины шрифта, где каждое число представляет собой толщину, более темную, чем предыдущая.400andnormal＆700the samebold。

• ofbolderиlighterА другие значения являются абсолютными значениями ширины шрифта, которые относительны к наследуемым шрифтам.

p　{
　　　　font-weight:　bold;
}

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

Вариант шрифта

font-variantСвойство позволяет отображать текст в особой форме заглавных букв.

Строчные и заглавные буквы илиСтрочные и заглавные буквыОтличается от обычных заглавных букв, в которых строчные буквы отображаются как меньшие версии соответствующих заглавных букв.

font-variantЗначение свойства может бытьnormal，small-capsиinherit。

p　{
　　　　font-variant:　small-caps;
}