Шрифты для сайта в css

Как подключить шрифт CSS?

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

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

Для наших целей лучше всего подойдет файл с расширением .ttf, так как он поддерживаться всеми браузерами. Так же файл может быть в форматах .eot, .woff, .svg. Для поддержки данного шрифта в старых версиях Internet Explorer и некоторых других браузеров желательно подключить и форматы .eot и .woff

3.Скачанный файл нам нужно загрузить в папку fonts в корневом каталоге сайта. Если же ваш сайт сделан на WordPress или другой CMS, то вам нужно загрузить файл в папку fonts, которая находится в папке с темой оформления.

4.Далее открываем css-файл стилей сайта или используемой темы. Это можно сделать, подключившись к сайту по FTP в текстовом редакторе NotePad++ или его аналоге.

5.Затем нам нужно подключить шрифт CSS-правилом font-face

Для этого в самом начале файла стилей style.css, после комментария, содержащего информацию о теме, вставляем следующий код:

PHP

@font-face {
font-family: ‘Font Name’;
src: url(‘fonts/ Font Name.ttf’) format(‘truetype’);
font-weight: normal;
font-style: normal;
}

1
2
3
4
5
6

@font-face{

font-family’Font Name’;

srcurl(‘fonts/ Font Name.ttf’)format(‘truetype’);

font-weightnormal;

font-stylenormal;

}

Обратите внимание! Вместо текста «Font Name» вам нужно вставить название скачанного вами файла. И обязательно обращайте внимание на формат, так как у вас он может быть другой или их может быть несколько.

Вот примеры подключения в CSS наиболее популярных форматов:

PHP

src: url(‘fonts/ Font Name.woff’) format(‘woff’);
src: url(‘fonts/ Font Name.eot’) format(‘eot’);
src: url(‘fonts/ Font Name.svg’) format(‘svg’);

1
2
3

srcurl(‘fonts/ Font Name.woff’)format(‘woff’);

srcurl(‘fonts/ Font Name.eot’)format(‘eot’);

srcurl(‘fonts/ Font Name.svg’)format(‘svg’);

6.Теперь наш шрифт подключен, и мы можем его использовать

Для того, что бы применить его к определенному блоку, нам нужно в css-стилях для класса этого блока дописать свойство font-family:

PHP

font-family: ‘ JuraBook ‘;

1

font-family’ JuraBook ‘;

Например:

PHP

.main-navigation ul li a {
font-family: ‘JuraBook’;
font-size:18px;
}

1
2
3
4

.main-navigationullia{

font-family’JuraBook’;

font-size18px;

}

Как подключить нестандартный шрифт в CSS

Кроме шрифтов, которые содержатся в операционной системе пользователя, можно использовать и другие шрифты.
Их можно найти в интернете или создать самостоятельно. Существует много нестандартных шрифтов. Чтобы их
найти, нужно в поисковике написать — шрифты. Файл шрифта нужно скачать и присоединить к странице.
Некоторые шрифты являются платными. Об этом должна быть информация на странице,
с которой Вы скачиваете шрифт.

Сложность использования нестандартных шрифтов заключается в том, что каждый браузер поддерживает свой
набор форматов. Поэтому, при использовании нестандартрого шрифта нужно проверять, как отображается
страница в разных браузерах. Форматов шрифтов достаточно много. Наиболее универсальным является формат
woff. Он должен работать в большинстве современных браузеров. Также распространены ttf и otf.

Чтобы подключить нестандартный шрифт CSS используется правило @font-face. В нём обязательно должны
быть два свойства: в свойстве font-family указывается название шрифта, под которым
он будет использоваться на сайте. Название Вы выбираете сами. А в свойстве
src указывается путь к файлу шрифта.

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

Для примера я использую файл шрифта unineue.woff. Он располагается в той же папке, что и
страница. Шрифт я назову Nfont.

Стиль:

7891011121314
1516
@font-face
  {
  font-family: Nfont;
  src: url("unineue.woff");
  }
#text
  {
  font-family: Nfont;
  font-size: 40px;
  }

HTML код:

31
Текст с нестандартным шрифтом

Чтобы шрифт работал в разных браузерах, можно использовать несколько файлов с разными форматами. В свойстве
src путь к файлам пишется через запятую. Каждый браузер сам определяет, какой тип
файла использовать. При этом желательно указывать форматы файлов, чтобы браузер мог правильно выбрать файл.
CSS правило @font-face будет выглядеть так:

789101112
@font-face 
  {
  font-family: Nfont; 
  src: url("unineue.woff") format("woff"),
  url("unineue.ttf") format("truetype");
  }

Безопасные шрифты

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

Times New Roman, serif

Georgia, serif

Arial, sans-serif

Verdana, sans-serif

Tahoma, sans-serif

Impact, sans-serif

Trebuchet MS, sans-serif

Courier New, monospace

Comic Sans MS, cursive

Другие шрифты Вы можете найти, если наберёте в любом поисковике: стандартные шрифты.

Типы веб-шрифтов и их поддержка браузерами

Все современные браузеры поддерживают использование определённых веб-шрифтов. Происходит это следующим образом: браузер пользователя загружает шрифт с указанного сервера и применяет его для отображения текущей страницы. В настоящее время существуют следующие виды веб-шрифтов:

  • TTF/OTF (True Type и Open Type Fonts) — эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
  • WOFF (Web Open Font Format) — сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
  • WOFF2 (Web Open Font Format 2) — спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
  • SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
  • EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).
Формат шрифта Chrome Firefox Opera Safari IExplorer Edge
TTF/OTF (True Type и Open Type Fonts) 4.0 3.5 10.0 3.1 9.0* 12.0
WOFF (Web Open Font Format) 5.0 3.6 11.1 5.1 9.0 12.0
WOFF2 (Web Open Font Format 2) 36.0 39.0* 26.0 Нет Нет Нет
SVG (Scalable Vector Graphic) 4.0 Нет 9.0 3.2 Нет Нет
EOT (Embedded Open Type) Нет Нет Нет Нет 6.0 12.0

Font Size

The property sets the size of the text.

Being able to manage the text size is important in web design. However, you
should not use font size adjustments to make paragraphs look like headings, or
headings look like paragraphs.

Always use the proper HTML tags, like

for headings and

for
paragraphs.

The font-size value can be
an absolute, or relative size.

Absolute size:

  • Sets the text to a specified size
  • Does not allow a user to change the text size in all browsers (bad for accessibility reasons)
  • Absolute size is useful when the physical size of the output is known

Relative size:

  • Sets the size relative to surrounding elements
  • Allows a user to change the text size in browsers

Note: If you do not specify a font size, the default size for normal text, like paragraphs, is 16px (16px=1em).

Где скачать шрифты для подключения к сайту через CSS?

На сегодняшний день есть огромное количество различный ресурсов для скачивания шрифтов, но лично мне больше всего нравится вот этот: FontStorage.com

Вот его основные преимущества по сравнению с другими ресурсами:

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

Наличие сортировки по типу шрифта, тематике и поддерживаемым языкам (алфавитам), что немаловажно!

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

Так же, в одной из моих прошлых статей я рассказывала, как подключить к сайту Google Fonts. Если вам интересно, то вы можете ознакомиться со статьей по этой ссылке: Красивые шрифты Google Fonts для вашего сайта

А на сегодня у меня все. Желаю вам успехов в создании сайтов!

До встречи в следующих статьях!

С уважением Юлия Гусарь

Font Family

The font family of a text is set with the property.

The property should hold several font names as a «fallback» system.
If the browser does not support the first font, it tries the next font, and so
on.

Start with the font you want, and end with a generic family, to let the
browser pick a similar font in the generic family, if no other fonts are
available.

Note: If the name of a font family is more than one word, it must be in
quotation marks, like: «Times New Roman».

More than one font family is specified in a comma-separated list:

Example

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

For commonly used font combinations, look at our Web Safe Font Combinations.

CSS Font Families

In CSS, there are two types of font family names:

  • generic family — a group of font families with a
    similar look (like «Serif» or «Monospace»)
  • font family — a specific font family (like «Times New Roman»
    or «Arial»)
Generic family Font family Description
Serif Times New RomanGeorgia Serif fonts have small lines at the ends on some characters
Sans-serif ArialVerdana «Sans» means without — these fonts do not have the
lines at the ends of characters
Monospace Courier NewLucida Console All monospace characters have the same width

Note: On computer screens, sans-serif fonts are considered easier to read than serif fonts.

The css

/*
   FONT WEIGHT
*/
.fwn { font-weight: normal; }
.b { font-weight: bold; }
.fw-light { font-weight: lighter; }
.fw-bolder { font-weight: bolder; }
.fw1 { font-weight: 100; }
.fw2 { font-weight: 200; }
.fw3 { font-weight: 300; }
.fw4 { font-weight: 400; }
.fw5 { font-weight: 500; }
.fw6 { font-weight: 600; }
.fw7 { font-weight: 700; }
.fw8 { font-weight: 800; }
.fw9 { font-weight: 900; }
@media screen and (min-width: 48em) {
 .fwn-ns { font-weight: normal; }
 .b-ns { font-weight: bold; }
 .fw-light-ns { font-weight: lighter; }
 .fw-bolder-ns { font-weight: bolder; }
 .fw1-ns { font-weight: 100; }
 .fw2-ns { font-weight: 200; }
 .fw3-ns { font-weight: 300; }
 .fw4-ns { font-weight: 400; }
 .fw5-ns { font-weight: 500; }
 .fw6-ns { font-weight: 600; }
 .fw7-ns { font-weight: 700; }
 .fw8-ns { font-weight: 800; }
 .fw9-ns { font-weight: 900; }
}
@media screen and (min-width:48em) and (max-width: 64em) {
 .fwn-m { font-weight: normal; }
 .b-m { font-weight: bold; }
 .fw-light-m { font-weight: lighter; }
 .fw-bolder-m { font-weight: bolder; }
 .fw1-m { font-weight: 100; }
 .fw2-m { font-weight: 200; }
 .fw3-m { font-weight: 300; }
 .fw4-m { font-weight: 400; }
 .fw5-m { font-weight: 500; }
 .fw6-m { font-weight: 600; }
 .fw7-m { font-weight: 700; }
 .fw8-m { font-weight: 800; }
 .fw9-m { font-weight: 900; }
}
@media screen and (min-width: 64em) {
 .fwn-l { font-weight: normal; }
 .b-l { font-weight: bold; }
 .fw-light-l { font-weight: lighter; }
 .fw-bolder-l { font-weight: bolder; }
 .fw1-l { font-weight: 100; }
 .fw2-l { font-weight: 200; }
 .fw3-l { font-weight: 300; }
 .fw4-l { font-weight: 400; }
 .fw5-l { font-weight: 500; }
 .fw6-l { font-weight: 600; }
 .fw7-l { font-weight: 700; }
 .fw8-l { font-weight: 800; }
 .fw9-l { font-weight: 900; }
}

Свойства font-weight, font-style, text-decoration и другие

С помощью свойства стилей font-weight задают «жирность» шрифта. Синтаксис:

font-weight: normal|bold|bolder|lighter|100|200|300|400|500|600|700|800|900

В качестве значения свойства может  использоваться одно из семи числовых значений от 100 до 900, либо одно из именованных normal, bold, bolder, lighter. Значение normal соответствует 400, а bold — 7000. Но на практике большинство браузеров не поддерживают атрибут font-weight в полной мере. Поэтому все значения, которые меньше 400 будут соответствовать normal, а все, что больше bold. Причем значения bolder и lighter не работают.

Пример использования:

em { font-weight: bold; }

Свойство CSS font-style задает начертание шрифта. Для него доступны три значения: normal, italic и oblique. Но на практике используют только первые два, где «normal» устанавливает нормальное начертание шрифта, а значение «italic» заставляет браузер выводить текст курсивным начертанием.

С помощью свойства text-decoration можно задавать различные украшательства тексту, такие как подчеркивание текста или зачеркивание:

text-decoration: none|underline|overline|line-through|blink

Для этого атрибута доступны пять значений:

  • none — отменяет все эффекты, в том числе отменяет подчеркивание у ссылок, которое задано по умолчанию;
  • underline — устанавливает подчеркнутые текст;
  • overline — «надчеркивает» текст, то есть проводит линию над текстом;
  • line-through — зачеркивает текст;
  • blink — устанавливает мигающий текст. Такой текст периодически, примерно раз в секунду исчезает, потом вновь появляется на прежнем месте. Это значение в настоящее время не поддерживается браузерами и осуждается в CSS3.

По умолчанию, для большинства элементов текст выводится без эффектов. Но некоторые html элементы отображают текст с подчеркиванием, в частности гиперссылки (тег a).

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

Нюансом свойства text-decoration является то, что для него можно указать сразу несколько значений:

text-decoration:underline overline line-through;

Результат будет такой:

перечеркнутый подчеркнутый и надчеркнутый текст!

Свойство стиля text-transform позволяет задавать регистр символов текста:

text-transform: capitalize|uppercase|lowercase|none

Свойство может иметь одно из четырех значений:

  • capitalize — преобразовывает к верхнему регистру первую букву каждого слова;
  • uppercase — текст в верхнем регистре;
  • lowercase — текст в нижнем регистре;
  • none — не меняет регистр символов.

 Для увеличения и уменьшения расстояния между строками текста используется атрибут line-height. В качестве значения можно задавать как абсолютную так и относительную величину расстояния, указав соответствующую единицу измерения (px, pt, em и др.). В случае отсутствия единицы измерения указанное значение воспринимается браузером как множитель. Например, значение 1.5 устанавливает полуторный междустрочный интервал:

p { line-height: 1.5 }

Для управления расстоянием между символами текста существует свойство letter-spacing. Оно позволяет задавать дополнительное расстояние между буквами, которое будет прибавляться к изначальному. В качестве значений принимаются любые единицы длины, принятые в CSS — пиксели (px), пункты (pt) и др. Допустимо использовать отрицательные значения. В этом случае расстояние между символами уменьшится:

em { letter-spacing: 5px; }

Аналогичный атрибут word-spacing задает дополнительное расстояние между словами текста:

h1 { word-spacing: 5px }

Ну и напоследок необходимо рассмотреть свойство стиля font, позволяющее задавать сразу несколько параметров для шрифта. Синтаксис:

font: font-size font-family

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

Например, чтобы задать для текста абзацев шрифт «Times New Roman» размером 10 пунктов, достаточно написать следующее правило CSS:

p { font: 10pt «Times New Roman» }

А если мы захотим выводить текст заголовков первого уровня рубленым шрифтом размером 15 пикселей и курсивным начертанием, то подойдет такое правило:

p { font: italic 12px sans-serif }

SIL Open Font License v1.10

This license can also be found at this permalink:
https://www.fontsquirrel.com/license/nunito

Copyright (c) 2011, Vernon Adams (vern@newtypography.co.uk),
with Reserved Font Name Nunito.

This Font Software is licensed under the SIL Open Font License, Version 1.1.
This license is copied below, and is also available with a FAQ at: http://scripts.sil.org/OFL

—————————————————————————————-
SIL OPEN FONT LICENSE Version 1.1 — 26 February 2007—————————————————————————————-

PREAMBLE
The goals of the Open Font License (OFL) are to stimulate worldwide development of collaborative font projects, to support the font creation efforts of academic and linguistic communities, and to provide a free and open framework in which fonts may be shared and improved in partnership with others.

The OFL allows the licensed fonts to be used, studied, modified and redistributed freely as long as they are not sold by themselves. The fonts, including any derivative works, can be bundled, embedded, redistributed and/or sold with any software provided that any reserved names are not used by derivative works. The fonts and derivatives, however, cannot be released under any other type of license. The requirement for fonts to remain under this license does not apply to any document created using the fonts or their derivatives.

DEFINITIONS
“Font Software” refers to the set of files released by the Copyright Holder(s) under this license and clearly marked as such. This may include source files, build scripts and documentation.

“Reserved Font Name” refers to any names specified as such after the copyright statement(s).

“Original Version” refers to the collection of Font Software components as distributed by the Copyright Holder(s).

“Modified Version” refers to any derivative made by adding to, deleting, or substituting—in part or in whole—any of the components of the Original Version, by changing formats or by porting the Font Software to a new environment.

“Author” refers to any designer, engineer, programmer, technical writer or other person who contributed to the Font Software.

PERMISSION & CONDITIONS
Permission is hereby granted, free of charge, to any person obtaining a copy of the Font Software, to use, study, copy, merge, embed, modify, redistribute, and sell modified and unmodified copies of the Font Software, subject to the following conditions:

1) Neither the Font Software nor any of its individual components, in Original or Modified Versions, may be sold by itself.

2) Original or Modified Versions of the Font Software may be bundled, redistributed and/or sold with any software, provided that each copy contains the above copyright notice and this license. These can be included either as stand-alone text files, human-readable headers or in the appropriate machine-readable metadata fields within text or binary files as long as those fields can be easily viewed by the user.

3) No Modified Version of the Font Software may use the Reserved Font Name(s) unless explicit written permission is granted by the corresponding Copyright Holder. This restriction only applies to the primary font name as presented to the users.

4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font Software shall not be used to promote, endorse or advertise any Modified Version, except to acknowledge the contribution(s) of the Copyright Holder(s) and the Author(s) or with their explicit written permission.

5) The Font Software, modified or unmodified, in part or in whole, must be distributed entirely under this license, and must not be distributed under any other license. The requirement for fonts to remain under this license does not apply to any document created using the Font Software.

TERMINATION
This license becomes null and void if any of the above conditions are not met.

Теги HTML

lass=»block_content scroll»>

  • Все теги
  • Валидация тегов
    • accesskey
    • charset
    • coords
    • download
    • href
    • hreflang
    • name
    • rel
    • rev
    • shape
    • tabindex
    • target
    • title
    • type
  • title

    • align
    • alt
    • archive
    • code
    • codebase
    • height
    • hspace
    • vspace
    • width
    • accesskey
    • alt
    • coords
    • href
    • hreflang
    • nohref
    • shape
    • tabindex
    • target
    • type
    • autoplay
    • controls
    • loop
    • muted
    • preload
    • src
    • href
    • target
    • color
    • face
    • size
  • dir

    • balance
    • loop
    • src
    • volume
    • alink
    • background
    • bgcolor
    • bgproperties
    • bottommargin
    • leftmargin
    • link
    • rightmargin
    • scroll
    • text
    • topmargin
    • vlink
  • clear

    • accesskey
    • autofocus
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • name
    • type
    • value
    • align
    • valign
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • align
    • char
    • charoff
    • span
    • valign
    • width
    • cite
    • datetime
    • align
    • title
    • align
    • height
    • hidden
    • hspace
    • pluginspage
    • src
    • type
    • vspace
    • width
    • disabled
    • form
    • title
    • color
    • face
    • size
    • accept-charset
    • action
    • autocomplete
    • enctype
    • method
    • name
    • novalidate
    • target
    • bordercolor
    • frameborder
    • name
    • noresize
    • scrolling
    • src
    • border
    • bordercolor
    • cols
    • frameborder
    • framespacing
    • rows
  • align

  • align

  • align

  • align

  • align

  • align

  • profile

    • align
    • color
    • noshade
    • size
    • width
    • manifest
    • title
    • xmlns
    • align
    • allowtransparency
    • frameborder
    • height
    • hspace
    • marginheight
    • marginwidth
    • name
    • sandbox
    • scrolling
    • seamless
    • src
    • srcdoc
    • vspace
    • width
    • align
    • alt
    • border
    • height
    • hspace
    • ismap
    • longdesc
    • lowsrc
    • src
    • usemap
    • vspace
    • width
    • accept
    • accesskey
    • align
    • alt
    • autocomplete
    • autofocus
    • border
    • checked
    • disabled
    • form
    • formaction
    • formenctype
    • formmethod
    • formnovalidate
    • formtarget
    • list
    • max
    • maxlength
    • min
    • multiple
    • name
    • pattern
    • placeholder
    • readonly
    • required
    • size
    • src
    • step
    • tabindex
    • type
    • value
    • cite
    • datetime
    • accesskey
    • for
    • accesskey
    • align
    • title
    • type
    • value
    • charset
    • href
    • media
    • rel
    • sizes
    • type
  • name

    • behavior
    • bgcolor
    • direction
    • height
    • hspace
    • loop
    • scrollamount
    • scrolldelay
    • truespeed
    • vspace
    • width
    • label
    • type
    • charset
    • content
    • http-equiv
    • name
    • high
    • low
    • max
    • min
    • optimum
    • value
    • align
    • archive
    • classid
    • code
    • codebase
    • codetype
    • data
    • height
    • hspace
    • tabindex
    • type
    • vspace
    • width
    • reversed
    • start
    • type
    • disabled
    • label
    • disabled
    • label
    • selected
    • value
  • align

    • name
    • type
    • value
    • valuetype

Типы тегов

HTML5

Блочные элементы

Строчные элементы

Универсальные элементы

Нестандартные теги

Осуждаемые теги

Видео

Документ

Звук

Изображения

Объекты

Скрипты

Списки

Ссылки

Таблицы

Текст

Форматирование

Формы

Фреймы

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

e http-equiv=»Content-Type» content=»text/html;charset=UTF-8″> class=»table-blue»>
Свойство font-family
Свойство

Значение
Описание
Пример
font-family
имя шрифта
Устанавливает шрифт из списка
P {font-family: Arial, sans-serif}

Если не указывать это свойство в CSS, то броузер будет показывать текст шрифтом по умолчанию. Обычно это Times New Roman.

Список шрифтов в значении font-family может включать одно или несколько названий, разделенных запятой. Если в имени шрифта содержатся пробелы, например, Trebuchet MS, оно должно заключаться в кавычки, одинарные или же двойные.

Браузер поочерёдно проверяет наличие шрифтов из списка на компьютере пользователя. Если первый шрифт в списке есть, то используется он, иначе браузер проверяет наличие второго шрифта из списка. Если ни одного нет, используется шрифт по умолчанию. В конце списка обычно прописывают ключевые слово, которое описывает тип желаемого шрифта — serif, sans-serif, fantasy, cursive или monospace.

Универсальные семейства шрифтов:

  • serif — антиквенные шрифты (шрифты с засечками), типа Times;
  • sans-serif — рубленные шрифты (шрифты без засечек или гротески), типичный представитель — Arial;
  • monospace — моноширинные шрифты, ширина каждого символа в таком семействе одинакова (шрифт Courier).
  • fantasy — семейство декоративных шрифтов;
  • cursive — семейство курсивных шрифтов;

Пример с использованием:

Следующее свойство:

Свойство font-style
Свойство Значение Описание Пример
font-style normalitalicoblique Нормальный шрифтКурсивНаклонный шрифт P {font-style: oblique}

Пример кода, в этом примере встроим стили в тег при помощи атрибута style.

Видно что курсив от наклонного шрифта внешне не отличается.

Следующее свойство:

Свойство font-variant
Свойство Значение Описание Пример
font-variant normalsmall-caps Устанавливает капитель (особые прописные буквы) P {font-variant: small-caps}

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

Следующее свойство:

Свойство font-weight
Свойство Значение Описание Пример
font-weight normallighterboldbolder100–900 Нормальная жирностьСветлое начертаниеПолужирныйЖирный100 — светлый шрифт,900 — самый жирный P {font-weight: bolder}

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

Браузеры обычно не могут точно показать требуемую насыщенность шрифта, поэтому переключаются между значениями bold, normal и lighter. На практике же начертание в большинстве браузеров обычно ограничено только двумя вариантами: нормальное начертание и жирное начертание.

Значения lighter и bolder изменяют жирность шрифта относительно насыщенности родителя, соответственно, в меньшую и большую сторону.

Следующее свойство:

Свойство font-size — определяет размер шрифта элемента. Размер шрифта можно задать несколькими способами.

Свойство font-size
Свойство Значение Описание Пример
font-size normalptpx% нормальный размерпунктыпикселыпроценты font-size: normalfont-size: 11ptfont-size: 11pxfont-size: 110%

Абсолютный размер кегля шрифта может задаваться с использованием ключевых слов: xx-small (крайне малый), small (малый), medium (средний, значение по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое). Абсолютные размеры шрифта зависят от настроек браузера и операционной системы, так что они не совсем абсолютны.

Для изменения размера текста относительно родителя используется другой набор констант (larger — увеличивает размер относительно родительского, smaller — уменьшает размер).

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

Шрифты группируются по 5 типам:

  • serif — шрифты имеют небольшие засечки на окончаниях линий каждого символа;
  • sans-serif;
  • monospace;
  • cursive;
  • fantasy;

cursive и fantasy никогда не используются.

Поскольку свойство CSS font family наследуется всеми дочерними элементами HTML, — можно применить шрифт ко всей веб-странице, задав его для элемента

body{ font-family: sans-serif;}

В этом примере на веб-странице в качестве приоритетного будет использоваться шрифт sans-serif.

Шрифты для Веб

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

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

body{ font-family: Arial;}

Для веб-страницы будет использоваться CSS font family Arial, но при условии, что он установлен на компьютере пользователя. Иначе будет использоваться заданный по умолчанию для браузера шрифт типа serif (как правило, это Times).

Семейство Arial является надежным выбором, так как оно установлено по умолчанию на всех компьютерах, работающих на Windows и Mac, а также на большинстве Linux систем. Именно поэтому этот шрифт считается надежным: вы можете использовать его в CSS, будучи при этом уверенными, что на компьютере пользователя он установлен.

Есть 9 надежных веб-шрифтов:

  • Arial;
  • Arial Black;
  • Comic Sans MS;
  • Courier New;
  • Georgia;
  • Impact;
  • Times New Roman;
  • Trebuchet MS;
  • Verdana.

Применение списка шрифтов

Для свойства font-family также можно задать альтернативные значения, прописав список семейств шрифтов:

body{ font-family: Arial, Verdana, sans-serif;}

В этом примере мы указываем браузеру искать первое значение CSS font family Arial и использовать его. Если этот шрифт недоступен, программа будет использовать Verdana. И, наконец, если он не доступен, то будет использовать шрифт по умолчанию sans-serif.

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

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

Данная публикация представляет собой перевод статьи «Choosing a font» , подготовленной дружной командой проекта Интернет-технологии.ру

Ссылка на основную публикацию