Css fonts

Рассмотрим шрифт, созданный с целью оптимизации объёма шрифта путём выделения латинских, японских и других символов из разных файлов шрифтов:

/* размер резервного шрифта: 4.5MB */ @font-face {  font-family: DroidSans;  src: url(DroidSansFallback.woff);  /* диапазон не задан, поэтому по умолчанию устанавливается весь диапазон */ }  /* размер японских глифов: 1.2MB */ @font-face {  font-family: DroidSans;  src: url(DroidSansJapanese.woff);  unicode-range: U+3000-9FFF, U+ff??; }  /* Размер латинского, греческого и кириллицы наряду с некоторыми  знаками препинания и символами: 190KB */ @font-face {  font-family: DroidSans;  src: url(DroidSans.woff);  unicode-range: U+000-5FF, U+1e00-1fff, U+2000-2300; } 

Для простого латинского текста, достаточно загрузить шрифт только с латинскими символами:

body { font-family: DroidSans; }  <p>Это является тем</p> 

В этом случае браузер сначала проверяет unicode-range для шрифта содержащего латинские символы (DroidSans.woff). Поскольку все символы находятся в диапазоне от U+0-5FF, то браузер загружает шрифт и отображает текст с помощью данного шрифта.


Далее рассмотрим текст, который использует символ стрелки (⇨):

<p>Это &#x21e8; тем<p> 

Браузер так же сначала проверяет unicode-range шрифта, содержащего латинские символы. Так как U +2000-2300 включает в себя код стрелки (U +21 E8), браузер загрузит данный шрифт. Однако для этого символа в латинском шрифт нет соответствующего глифа, поэтому эффективный unicode-range используется для подбора шрифта исключающего данный элемент кода. Затем браузер проверяет японский шрифт. Unicode-range для японского шрифта представляет U+3000-9FFF и U+ff??, не включая U+21E8, так что браузер не загружает японский шрифт. Далее рассматривается резервный шрифт. Правило @font-face не определяет unicode-range для резервного шрифта, поэтому в качестве его значения выступает диапазон всех элементов Unicode кода. Для отображения символа стрелки загружается и используется резервный шрифт.

programmerbook.ru

Абсолютный способ

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

Данный способ позволяет задавать размер шрифта в абсолютных единицах таких как: пиксели (px) или проценты (%).

Относительный способ


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

Для задания размера шрифта данным способом используются единицы em. 1em эквивалентен размеру шрифта в браузере по умолчанию и равен 16px.

Обратите внимание: W3C рекомендует для задания шрифта использовать именно этот способ.

Обратите внимание: не используйте свойство font-size для того, чтобы оформлять абзацы как заголовки. Всегда используйте для определения абзацев тэги p, а для заголовков h1-h6.

Свойство font-style позволяет сделать шрифт HTML элемента курсивным.

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

www.wisdomweb.ru

Выбор начертания

Быстрый способ увеличить привлекательность контента – это выбрать красивое начертание шрифта, или свойство CSS font-family:

h1{  font-family: Verdana;  }  

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

Есть группы шрифтов, которые имеются на устройствах каждого пользователя. Например, Arial, Helvetica и, конечно, Times New Roman. Дизайнеры делят их на четыре типа.

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


Первый – это антиквенный, или шрифт с засечками. Отлично подходит для длинных статей. Маленькие штрихи на концах «связывают» буквы и делают текст приятным для глаз и легко читаемым. К этой группе относятся: Times, Garamond, Baskerville, Georgia.

Если вы не знаете, какое сочетание выбрать, попробуйте следующий набор для CSS font-family:

font-family: Baskerville, Palatino Linotype, Times, serif;

Следующая большая группа шрифтов – sans-serif, или рубленые шрифты. В них нет засечек, они смотрятся не так витиевато, как антиквенные, но четко и понятно. Всегда используйте их для заголовков. Самыми популярными представителями являются CSS font-family Arial, Tahoma, Helvetica и Verdana.

Не так часто, как два предыдущих типа, используют моноширинные и декоративные шрифты. У моноширинного начертания одинаковая ширина символов, и они похожи на буквы печатных механических машинок. Нужны для отображения специального кода, например CSS. К font-family таких шрифтов относят Courier, Copperplate Light, Copperplate Gothic Light.

С декоративными шрифтами будьте осторожней. Избыточное количество декорированного текста делает из веб-страницы ярмарочного зазывалу. Но если невтерпеж, то внешний вид должен соответствовать контексту. Заголовок с CSS font-family Comic Sans MS будет нелепо смотреться на сайте о циркулярных пилах.

Веб-шрифты


Интернет был бы очень скучным местом, если бы каждый заголовок был набран в Arial, а каждая статья в Times New Roman. На радость дизайнерам, современные браузеры поддерживают веб-шрифты. Отличаются от десктопных (установленных на компьютере) форматом. Для настольных приложений, таких как “Фотошоп”, “Ворд”, “Иллюстратор”, используются файлы с расширением .otf .ttf или .ps1. Для работы в интернете нужны форматы TrueType, WOFF, EOT и SVG.

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

@font-face{  	font-family: 'Roboto';  	src: url('../fonts/roboto_family/Roboto/Roboto-Italic.woff');  	font-style: italic;  	font-weight: normal;  }

Всемирная паутина изобилует ресурсами со всевозможной платной и бесплатной типографикой. Самым простым, бесплатным и порой оптимальным решением будет использование Google Fonts. Переходите на сайт fonts.google.com и выберите то что вам нравится. Возле названия есть кнопка в виде красного «+», нажмите ее, и шрифт выбран. Можете не ограничивать себя и добавить сразу пять или десять семейств.

В нижней части экрана расположено всплывающее окно черного цвета с надписью family selected. Активируйте его, и у вас появится ссылка наподобие:

<link href="https://fonts.googleapis.com/css?family=Notable|Open+Sans" rel="stylesheet">    

И отдельные записи выбранных семейств:

font-family: 'Open Sans', sans-serif;  font-family: 'Notable', sans-serif;

Ссылку вставляйте в HTML-разметку в раздел <head>:

<!doctype html>  <html>  <head>  	<title>Signification</title>  	<meta charset="UTF-8">  	<link rel="stylesheet" type="text/css" href="sign.css">  	<link href="https://fonts.googleapis.com/css?family=Notable|Open+Sans" rel="stylesheet">  </head>  <body>  </body>  </html>

Затем используйте шрифты в CSS. Font-family, выбранные на Google Font, назначаются селектором элементов с текстом. Например, у вас есть несколько абзацев с текстом и заголовок:

p{  font-family: 'Open Sans', sans-serif;  }  h1{  font-family: 'Notable', sans-serif;  }

Правило @font-face

Если вы не хотите, чтобы работоспособность вашего сайта зависела от внешних ресурсов, подключайте типографику через @font-face. Сначала скачайте файлы на свою локальную машину. Поместите их в рабочий каталог сайта, лучше в отдельную папку fonts. Откройте CSS и пропишите правило @font-face. В font-family укажите название шрифта, в src путь к файлам.

   
@font-face { font-family: 'League Gothic'; src: url('fonts/League_Gothic-webfont.eot'); src: url('fonts/League_Gothic-webfont.eot?#iefix') format('embeddedopentype'), url('fonts/League_Gothic-webfont.woff2') format('woff2'), url('fonts/League_Gothic-webfont.woff') format('woff'), url('fonts/League_Gothic-webfont.ttf') format('truetype'), url('fonts/League_Gothic-webfont.svg') format('svg'); }

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

fb.ru

меню

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

Метрические атрибуты шрифта.

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

Значение:


  • имя семейства — семейства шрифта, применяемое для вывода текста. Имена, состоящие из нескольких слов, должны заключаться в кавычки.
  • имя типового шрифта, применяемого для вывода текста. Типовыми могут быть следующие шрифты: serif, sans-serif, fantasy и monospce.
  • inherit — применяется значение родительского элемента.

   p {font-family: «Times roman», courier, serif}

Примеры: [1]

Определяет начертания шрифта, такие как курсив или наклонное.

Значение:

  • normal — обычное начертание (по умолчанию).
  • italic — курсив.
  • oblique — наклонное начертание. Это начертание исключительно экранного шрифта. Он имеет несколько меньший наклон чем курсив.
  • inherit — применяется значение родительского элемента.

   p{font-style: italic; }

Примеры: [1]

Определяет, будет ли шрифт выведен в виде малых прописных букв.

Значение:

  • normal — обычное начертание (по умолчанию).
  • small-caps — выводит шрифт в виде малых прописных букв.
  • inherit — применяется значение родительского элемента.


   p {font-variant: small-caps }

Примеры: [1]

Определяет толщину выводимого шрифта.

Значение:

  • normal — обычное начертание (по умолчанию).
  • bold — полужирное начертание. Полужирное начертание выделяет текст. Линии становятся толще, а сам текст немного шире, чем при обычном начертании.
  • bolder — жирный шрифт.
  • lighter — светлый шрифт. Тонкие, светлые начертания шрифтов производят менее сильное впечатление, чем обычные или полужирные, но они незаменимы, когда требуется легкий и простой внешний вид.
  • 100-900 — число, указывающее толщину шрифта. 100 соответствует самой светлой толщине (lighter), 400-normal, 700- bold, 900- bolder.
  • inherit — применяется значение родительского элемента.

    p {font-weight: bold;}

Примеры: [1]

Определяет толщину шрифта.

Значение:


  • normal — обычная ширина (по умолчанию)
  • wider- увеличение текущей ширины.
  • narrower — уменьшает текущую ширину на единицу.
  • ultra-condensed — наименьшее значение ширины.
  • extra-condensed — значение большее, чем предыдущее
  • condensed — значение большее, чем предыдущее.
  • semi-condensed — значение большее, чем предыдущее.
  • semi-expanded — значение большее, чем при обычной толщине.
  • expanded — значение большее, чем предыдущее.
  • extra-expanded — значение большее, чем предыдущее.
  • ultra-expanded — максимальное значение ширины.
  • inherit — применяется значение родительского элемента.

   body{ font-stretch: condensed }

Примеры: [1]

Определяет кегель (высоту символов) шрифта.

Значение:

  • абсолютный размер — для выражения кегля шрифта используется ключевые слова: xx-small(крайне малый), small (малый), medium (средний) (по умолчанию), large (большой), x-large (очень большое), xx-large (крайне большое).
  • относительный размер — для выражение кегля шрифта используется ключевые слова: larger (меньше), smaller (больше),
  • любое соответствующая стандарту высота — абсолютный размер шрифта. Отрицательное значение не допускается.
  • любое соответствующее стандарту процентное значение.
  • inherit — применяется значение родительского элемента.

   p{font-size: 20px}

Примеры: [1]

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

Значение:

  • none — по умолчанию.
  • любое соответствующее стандартам значение — число, представляющее соотношение высоты и ширины символов.
  • inherit — применяется значение родительского элемента.

   p {font-size-adjust: 0.45}

Удобное свойство для установки сразу всех параметров шрифта. Если какие-то значение пропущены, то берется их значение по умолчанию.

Значение:

  • font-style — начертание.
  • font-variant — значение, определяющее вывод шрифта в виде малых прописных букв.
  • font-weight- толщина.
  • font-size — кегль.
  • line-height — интерлиньяж.
  • font-family — семейство шрифтов.
  • inherit — применяется значение родительского элемента.

   p {font: oblique 12pt «Helvetica Nue», serif; font-stretch: condensed }

Примеры: [1]

ruled.ru

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

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

  • sans-serif — шрифты без засечек, считается что они лучше читаются на экране компьютера, чем шрифты семейства serif.
  • serif — семейство шрифтов с засечками. У многих людей они ассоциируются с газетными статьями. Засечки — декоративные штрихи и черточки по краям букв.
  • monospace — семейство, состоящее из шрифтов, символы которых имеют одинаковую фиксированную ширину. Такие шрифты используются в основном для отображения примеров кода программы.
  • cursive — шрифты, имитирующие рукописный текст.
  • fantasy — художественные и декоративные шрифты. Они не очень широко распространены, доступны не на всех компьютерах и редко используются в веб-дизайне.

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

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

Рассмотрим, как браузер обрабатывает список шрифтов, заданный в нашем свойстве font-family:

  1. Сначала он проверяет, установлен ли шрифт Verdana на компьютере, и, если да, использует его в качестве шрифта для текста внутри элемента (в нашем случае внутри элемента <body>)
  2. Если Verdana не установлен, то ищет шрифт Helvetica. В случае успешного поиска использует его внутри <body>.
  3. Если и Helvetica не установлен, то ищет шрифт Arial. Если он имеется на компьютере, то применяет его внутри <body>.
  4. И наконец, если ни один из указанных шрифтов не найден, применяется первый, найденный браузером на компьютере шрифт из семейства sans-serif. Таким образом браузер сможет самостоятельно определить подходящий шрифт из семейства.
<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Название документа</title>  <style>  p.exserif { font-family: "Times New Roman", Times, serif; }  p.exsansserif { font-family: Arial, Helvetica, sans-serif; }  </style>  </head>   <body>  <h1>CSS свойство font-family</h1>  <p class="exserif">Абзац использующий шрифт Times New Roman.</p>  <p class="exsansserif">Абзац использующий шрифт Arial.</p>  </body> </html>

Примечание: при выборе только одного определенного шрифта важно понимать то, что браузер отобразит его только в том случае, если данный шрифт установлен на компьютере пользователя. Если шрифт не будет найден, то текст будет отображен шрифтом «Times New Roman», который задан по умолчанию во всех браузерах.

Стиль шрифта

Свойство font-style позволяет выделить текст курсивным, наклонным начертанием или наоборот придать тексту стандартный вид. Данное свойство имеет всего три значения:

  • normal — стандартный текст, имеющий обычное начертание, то есть не курсивное и не наклонное
  • italic — курсивное начертание
  • oblique — наклонное начертание
<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Название документа</title>  <style>  p.exnormal { font-style: normal; }  p.exitalic { font-style: italic; }  p.exoblique { font-style: oblique; }  </style>  </head>   <body>  <p class="exnormal">Абзац со значением normal.</p>  <p class="exitalic">Абзац со значением italic.</p>  <p class="exoblique">Абзац со значением oblique.</p>  </body> </html>

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

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

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

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

Пиксели

Значения в пикселях используются часто, поскольку такой подход предоставляет очень точный контроль над размером. Числовое значение заканчивает буквенными символами px, которые должны следовать сразу после числа (между числом и px не должно быть пробела).

body { font-size: 14px; }

Проценты

По умолчанию размер шрифта в браузерах равен 16px. Таким образом, значение 100% соответствует 16px, а 200% — 32px. Если вы определите правило, задающее всему тексту внутри элемента <body> значение 75% от размера по умолчанию (это будет соответствовать 12px), а затем определите еще одно правило, которое задает значение 75% для его дочернего элемента, то размер шрифта в этом элементе будет равен 9px (то есть 75% от 12px).

body { font-size: 100%; }

EM

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

body { font-size: 14px; } h2 { font-size: 1.2em; }

В примере мы задали элементу <body> размер шрифта 14px, а для всех элементов <h2> — 1.2em. Это означает, что размер шрифта заголовков второго уровня будет масштабирован с коэффициентом 1,2. В нашем случае размер всех заголовков <h2> будет составлять 1,2 размера шрифта элемента <body>, что означает в 1,2 раза больше, чем 14px, и примерно равняется 17px. (На самом деле размер будет равняться 16,8, но большинство браузеров округлит его до 17.)

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

Ключевые слова

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

p { font-size: small; }

Среднее значение medium — размер шрифта по умолчанию в браузерах. Остальные значения уменьшают или увеличивают размер шрифта с различными коэффециентами. Самый маленький размер шрифта xx-small равен примерно 9 пикселям, каждый последующий размер примерно на 20% больше предыдущего:

<!DOCTYPE html> <html>  <head>  <meta charset="utf-8">  <title>Название документа</title>  <style>  p.class1 { font-size: 120%; }  p.class2 { font-size: 18px; }  p.class3 { font-size: x-small; }  </style>  </head>   <body>  <p class="class1">Изменение размера с помощью процентов.</p>  <p class="class2">Изменение размера с помощью пикселей.</p>  <p class="class3">Изменение размера с помощью ключевого слова x-small.</p>  </body> </html>

«Безопасные» (стандартные) Web-шрифты

В интернете исторически сложилось такое понятие как «безопасные» Web-шрифты. Безопасным шрифтом можно назвать такой шрифт, который поддерживается операционной системой пользователя с очень высокой степенью вероятности. Поскольку о таком положении дел остаётся только мечтать, то абсолютно безопасных шрифтов не существует!

Основой для определения «безопасных» шрифтов послужили шрифты наиболее распространённой операционной системы — Windows, которые кроме того используются в других ОС:

Шрифты с засечками — serif

font-family Пример
Georgia, serif

Это заголовок

Это абзац

«Palatino Linotype», «Book Antiqua», Palatino, serif

Это заголовок

Это абзац

«Times New Roman», Times, serif

Это заголовок

Это абзац

Шрифты без засечек — Sans-Serif

font-family Пример
Arial, Helvetica, sans-serif

Это заголовок

Это абзац

«Arial Black», Gadget, sans-serif

Это заголовок

Это абзац

«Comic Sans MS», cursive, sans-serif

Это заголовок

Это абзац

Impact, Charcoal, sans-serif

Это заголовок

Это абзац

«Lucida Sans Unicode», «Lucida Grande», sans-serif

Это заголовок

Это абзац

Tahoma, Geneva, sans-serif

Это заголовок

Это абзац

«Trebuchet MS», Helvetica, sans-serif

Это заголовок

Это абзац

Verdana, Geneva, sans-serif

Это заголовок

Это абзац

Моноширинные шрифты — Monospace

font-family Пример
«Courier New», Courier, monospace

Это заголовок

Это абзац

«Lucida Console», Monaco, monospace

Это заголовок

Это абзац

« перейти к предыдущей теме перейти к следующей теме »


web.ryusupov.com

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

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

 p { font-family : Courier; /* устанавливаем тип шрифта – Courier */ } 

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

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


Рекомендуется последним в списке шрифтов указывать и семейство шрифта (generic-family). Если у пользователя по каким-то причинам отсутствуют все перечисленные Вами шрифты, то в этом случае страница будет отображена хотя бы шрифтом того же семейства, а не шрифтом «встроенным» в браузер.


Давайте рассмотрим следующий пример:

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Свойство font-family</title> <style>  .times { font-family: "Times New Roman", serif; /* определяем основной шрифт "Times New Roman", альтернативный serif (с засечками)*/ } .courier { font-family: Courier, monospace; /* определяем основной шрифт "Courier", альтернативный monospace (семейство моноширинных шрифтов) */ } </style> </head> 	<body> 		<p class = "times">Параграф, отображаемый шрифтом "Times New Roman".</p> 		<p class = "courier">Параграф, отображаемый шрифтом "Courier".</p> 	</body> </html>  

В данном примере для первого абзаца браузер проверит, есть ли в наличии у пользователя основной шрифт, если нет, то установит шрифт из семейства serif (с засечками). Для второго абзаца был задействован моноширинный шрифт Courier, а как альтернатива семейство моноширинных шрифтов (буквы имеют одинаковую ширину).


Шрифты, которые содержат в названии более одного слова, либо цифры, необходимо обязательно помещать в кавычки.


Результат нашего примера:

Рис. 34 Пример использования свойства font-family.
Рис. 34 Пример использования свойства font-family.

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

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

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

  • 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 для использования в качестве встроенных шрифтов на веб-страницах).

Ответственность и поиск веб-шрифтов

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

Чтобы не сталкиваться с любыми правовыми вопросами, связанными с использованием «платных» шрифтов на бесплатной основе, я рекомендую Вам, пользоваться службами шрифтов, например, такой как Google Fonts или, крупными коллекционными порталами, например, Webfont.ru. На начальном этапе Вам этого хватит «за глаза».

Добавление веб-шрифта на страницу

Для добавления шрифта на страницу Вам необходимо:

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

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

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на шрифте без засечек Roboto, Вы можете найти его в поиске, либо выбрать любой другой:
  3. Рис.35 Поиск шрифта в службе Google Fonts.

  4. После этого необходимо добавить его в коллекцию (у Вас должен быть создан аккаунт Google):
  5. Рис.35б Добавление шрифта в коллекцию (служба Google Fonts).

  6. После добавления шрифта в коллекцию, для Вас будет доступна возможность скачать его:
  7. Рис.36 Скачивание шрифта (служба Google Fonts).

  8. Распакуйте архив со шрифтами в директорию, из которой они будут подключаться к Вашей веб-странице, либо страницам:
  9. Рис.37 Распаковка архива со шрифтами (служба Google Fonts).

Как Вы можете заметить, в архиве содержится 12 различных шрифтов. Исходя из названий можно установить, что, например, Roboto-Italic предназначен для курсивного стиля шрифта, Roboto-Bold для жирного начертания шрифта, Roboto-BoldItalic для курсивного жирного начертания и так далее.

Еще раз обращаю Ваше внимание, что один файл шрифта содержит:

  • одну плотность шрифта.
  • один стиль для этого шрифта.

Обратите внимание на важный момент — если Вам необходимо получить полужирные и курсивные шрифты, то необходимо подгружать их отдельно (использовать правило CSS @font-face для данного типа шрифта)!


Конечно в том случае, если они существуют для понравившегося Вам варианта шрифта, обязательно учтите эти моменты при работе с веб-шрифтами!

Приступим к подключению, загруженных нами шрифтов к нашему документу. Для заголовков второго уровня (элемент <h2>) мы будем использовать шрифт — Roboto-Bold. Для абзацев (элемент <p>) будем использовать шрифт Roboto-Regular, а для курсивного начертания (элемент <i>) — Roboto-Italic.

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Пример использования правила @font-face</title> <style>  @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ src: url("/fonts/Roboto-Regular.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */ font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */ font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */  } @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */  /* для упрощения работы со шрифтами допускается использовать одинаковое имя, но при этом начертание или стиль шрифта должен отличаться. IE 8 и ниже не поддерживают такой подход и если Вы хотите поддерживать эти браузеры, то Вам необходимо называть каждый шрифт по разному и более детально стилизовать каждый селектор */ src: url("/fonts/Roboto-Bold.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */ font-style: normal; /* указываем, что стиль шрифта обычный - это значение по умолчанию */ font-weight: bold; /* определяет жирное начертание символов */  } @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ src: url("/fonts/Roboto-Italic.ttf") format('truetype'); /* задаем путь относительно корня сайта к шрифту (url) и тип шрифта (format). Тип шрифта выступает подсказкой для браузера (в идеале ускоряет процесс обработки) */ font-style: italic; /* указываем, что стиль шрифта курсивный */ font-weight: normal; /* определяет нормальное начертание символов - это значение по умолчанию */  } h2, p, b, i { /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */ font-family: "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */ } </style> </head> <body> 	<h2>Немного о пандах</h2> 	<p><b>Большая панда</b> (<i>Ailuropoda melanoleuca</i>) — бамбуковый медведь, одно из редчайших вымирающих животных, занесённых в международную Красную книгу; единственный современный представитель рода <b>большие панды</b> (<i>Ailuropoda</i>).</p> </body> </html> 

И так, что мы сделали в этом примере:

  • Добавили три правила @font-face в начало наших CSS стилей (это важно).
  • В каждом правиле с использованием CSS свойства (font-family) мы указали одно название шрифта, вы можете использовать своё название для всех правил, но будет лучше и понятнее если оно будет совпадать с наименованием шрифта.
  • В каждом правиле мы указали путь к файлу, который содержит шрифт с разрешением TTF (True Type Font).
  • Далее мы для всех правил с использованием свойства (font-style) указали стиль шрифта: для двух правил шрифт отображается обычным стилем — normal (это значение по умолчанию), а для одного указали, что он отображается курсивом (italic).
  • Кроме того, для всех правил с использованием свойства (font-weight) указали жирность шрифта: для двух правил шрифт отображается обычной жирности — normal (это значение по умолчанию), а для одного указали что он отображается жирным шрифтом (bold).
  • Нам осталось только применить наши шрифты к элементам. Для этого мы создали групповой селектор в котором с использованием ранее рассмотренного свойства font-family указали тип нашего шрифта и как альтернативу через запятую указали семейство шрифта, это сделано для того, что если по какой-то причине браузер пользователя не сможет загрузить наши шрифты, он смог использовать шрифты из указанного семейства, а не встроенные в браузер.

Результат нашего примера:

Рис.38 Пример использования правила @font-face..
Рис.38 Пример использования правила @font-face.

Для полноты картины, давайте рассмотрим, как добавлять несколько вариантов шрифтов (для поддержки современных более сжатых версий шрифтов):

 @font-face { font-family: "Roboto"; /* задаем произвольное имя для шрифта, которое будет использоваться в свойстве font-family при указании стилей для конкретных элементов */ src:  	local("font"); /* проверяется есть ли шрифт на локальном компьютере пользователя по имени, если нет то поиск осуществляется в других указанных источниках */ 	url("/fonts/font.woff2") format('woff2'); /* задаем путь к шрифту (url) и тип шрифта (format) */ 	url("/fonts/font.woff") format('woff'); /* задаем путь к шрифту (url) и тип шрифта (format) */ 	url("/fonts/font.ttf") format('truetype'); /* задаем путь к шрифту (url) и тип шрифта (format) */ } 

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


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


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

Добавление веб-шрифта со стороннего ресурса

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

  1. Переходим на сайт службы Google Fonts.
  2. Выбираем понравившийся нам шрифт, я остановился на том же шрифте, который мы использовали в прошлый раз — шрифт без засечек Roboto. Вы можете использовать поиск по наименованию для его нахождения.
  3. После добавления шрифта необходимо нажать на вкладку «Family-selected» (выбранные вами шрифты):
  4. Рис.39 Подключение шрифта без скачивания (служба Google Fonts).

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

    Например, меня интересуют следующие:

    • Для заголовков (элемент <h2>) и для жирного начертания я буду использовать шрифт – Bold 700 (Roboto Bold в наборе).
    • Для абзацев (элемент <p>) будем использовать шрифт Normal 400 (Roboto Regular в наборе), а для курсивного начертания Normal 400 Italic (Roboto Italic в наборе).

    Рис.40 Выбор необходимых шрифтов для подключения (служба Google Fonts).

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

  6. Следующим шагом необходимо выбрать те наборы символов (языки), которые будете использовать на своем сайте (выбор языков находится в том же вкладке — «Customize» немного ниже). В данном случае выбраны кириллические и латинские символы. Выбирайте только те наборы, которые вам необходимы, чтобы Ваши страницы загружались быстрее:
  7. Рис.41 Выбор необходимых наборов символов для подключения (служба Google Fonts).

  8. Далее на вкладке «Embed» нам будет предложено два варианта подключения (Standart и @import):

Первый вариант подключения (Standard). Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>. В адресе ссылки указывается веб-сервер Google и информация, которая необходима Google для загрузки необходимых шрифтов (как правило, это формат woff2 для современных браузеров, определение типа поддерживаемого шрифта происходит на стороне сервера Google в зависимости от Вашего браузера).

Рис.42 Создание ссылки на внешнюю таблицу стилей, используя HTML тег <link>

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

Обращаю Ваше внимание, что тег <link> размещается всегда внутри тега <head> (как правило, перед закрывающим тегом </head>).

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

Рис.43 Подключение шрифтов, используя свойство CSS font-family

Рассмотрим пример подключения, выбранных нами шрифтов:

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Пример подключение веб-шрифтов, используя тег <link></title> <link href = 'https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic' rel = 'stylesheet' type = 'text/css'> /* подключаем внешнюю таблицу стилей для загрузки необходимых шрифтов, в HTML 5 type='text/css' допускается не указывать */ <style> h2, p, b, i { /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */ font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */ } </style> </head> 	<body> 		<h2>Немного о верблюдах</h2> 		<p><b>Верблюды</b> (<i>Camelus</i>) — род млекопитающих семейства верблюдовых (<i>Camelidae</i>) подотряда мозоленогих (<i>Camelidae</i>) отряда парнокопытных (<i>Artiodactyla</i>). Это крупные животные, приспособленные для жизни в засушливых регионах мира — пустынях, полупустынях и степях.</p> 	</body> </html> 

Результат:

Рис.44 Пример подключение веб-шрифтов, используя тег <link>.
Рис.44 Пример подключение веб-шрифтов, используя тег <link>.

Второй вариант подключения, который мы также рассматривали в статье «Введение в CSS» это использование правила @import. В отличие от первого метода (используя HTML тег <link>), который требует добавления кода к каждой странице Вашего сайта, правило @import допускается использовать в начале своей таблицы стилей, которая у Вас уже должна быть подключена к каждой странице.

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

 @import url("path/to/file.css"); 

Предлагаемый вариант импортирования на страницу:

Рис.45 Привязка к внешнему файлу css, используя правило @import.


Обращаю Ваше внимание, что правила @import всегда необходимо указывать перед стилями CSS, иначе, таблицы стилей не импортируются (браузеры просто их проигнорируют).


Вы можете использовать правило @import как во внешних таблицах стилей, так и во внутренних. Рассмотрим пример подключения, выбранных нами шрифтов, используя правило @import во внутренних таблицах стилей:

 <!DOCTYPE html> <html> <head> 	<meta charset = "UTF-8"> 	<title>Пример подключение веб-шрифтов, используя правило @import</title> <style> @import url(https://fonts.googleapis.com/css?family=Roboto:400,700,400italic&subset=latin,cyrillic); /* импортируем внешнюю таблицу стилей */ h2, p, b, i { /* задаем групповой селектор для элементов <h2>, <p>, <b>, <i> */ font-family : "Roboto", sans-serif; /* устанавливаем шрифт Roboto, если он не будет загружен по какой-то причине, то указываем, чтобы браузер установил шрифт из семейства шрифтов без засечек (sans-serif) */ } </style> </head> 	<body> 		<h2>Немного о пингвинах</h2> 		<p><b>Пингвиновые</b> или <b>пингвины</b> (лат. <i>Spheniscidae</i>) — семейство нелетающих морских птиц, единственное в отряде <b>пингвинообразных</b> (<i>Sphenisciformes</i>). В семействе 18 современных видов. Все представители этого семейства хорошо плавают и ныряют.</p> 	</body> </html> 

Результат нашего примера:

Рис.46 Пример подключение веб-шрифтов, используя правило @import.
Рис.46 Пример подключение веб-шрифтов, используя правило @import.

Прошу Вас учесть тот момент, что правило @import увеличивает число соединений с сервером, поскольку файл, на который вы ссылаетесь, тоже нужно скачать и проанализировать. Исходя из правил и рекомендаций PageSpeed Insight (Google), связанных с оптимизацией страниц, рекомендуется избегать применения правила @import.

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


basicweb.ru

Здравствуйте уважаемые начинающие веб мастера.

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

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

И конечно же посмотрим, как внедрить свободный шрифт на сайт управляющийся CMS WordPress.

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

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

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

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

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

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

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

Ими был создан сервис, или библиотека, «Google Fonts», который изменил ситуацию в лучшую сторону, но о нём в конце статьи.

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

А пока я представлю список тех шрифтов, которые входят в наиболее распространённые ОС, а значит в большинстве случаев отобразятся так как положено.

1. Семейство sans-serif — шрифты без засечек, с прямыми чётко прописанными контурами.

а) Arial Шрифты для сайта
б) Arial Black Шрифты для сайта
в) Tahoma Шрифты для сайта
г) Verdana Шрифты для сайта
д) Lucida Sans Unicode Шрифты для сайта
е) Trebuchet MS Шрифты для сайта
ж) MS Sans Serif Шрифты для сайта
з) Impact Шрифты для сайта
е) Century Gothic Шрифты для сайта

2. Семейство serif — шрифты с засечками.

а) Times New Roman Шрифты для сайта
б) Georgia Шрифты для сайта
в) Palatino Linotype Шрифты для сайта
г) MS Serif Шрифты для сайта
д) Sylfaen Шрифты для сайта
е) Garamond Шрифты для сайта
ж) Century Шрифты для сайта

3. Семейство monospace — моноширинные шрифты.

а) Courier New Шрифты для сайта
б) Lucida Console Шрифты для сайта
в) Consolas Шрифты для сайта
г) Courier New Шрифты для сайта

4. Семейство cursive.

а) Сomic Sans MS Шрифты для сайта
б) Monotype Corsiva Шрифты для сайта
в) Mistral Шрифты для сайта

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

Это может быть тег <body>, если мы захотим задать шрифт для всей страницы, могут быть теги <h>, или <p>, если шрифты будут задаваться для заголовков или абзацев.

Задаются шрифты при помощи свойства CSS font-family, а в значении указывается название шрифта.

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

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

И ещё одно правило. Если название шрифта состоит из нескольких слов, то при написании в стиле, его нужно заключать в кавычки, если слово одно –  без кавычек.

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

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

Рассмотрим, как в CSS задаётся размер и цвет шрифта. Размер шрифта задаётся в пикселях (px), реже в процентах (%), и совсем редко в единицах(em) и пунктах (pt).

Базовый размер шрифта составляет: 16px, 100%, 1em, 12pt. Значит, если нам потребуется увеличить, или уменьшить шрифт, мы будем двигаться от этих данных в сторону увеличения, или уменьшения.

Свойство для задания размера шрифта называется font-size, и давайте установим его для всех абзацев, допустим, в 18px.

Так же можно задать это свойство заголовку h1, в том случае, если размер заголовка нужно ещё увеличить

Цвет шрифта задаётся свойством color

Можно так же задать размер и цвет какому либо слову или предложению расположенному внутри абзаца, используя тег <span> и атрибут style

Пример:

Тег <span> вводит в html код встроенные стили. Чуть ниже рассмотрим, как то же самое делается при помощи классов.

Теперь посмотрим, как отобразит этот код браузер.

Css fonts

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

Главное их знать, чтоб в дальнейшем, если придётся работать с каким либо кодом, иметь представление, что за значение указано в свойстве font-size.

Жирный и курсивный шрифт

Толщина шрифта задаётся свойством font-wieght, которое принимает следующие значения:

1. normal    — нормальный;
2. bold    — полужирный;
3. bolder    — жирнее родителя;
4. lighter    — тоньше родителя;
5. от 100 до 900    — цифровое значение, не обладает кроссбраузерностью;

Курсив задаётся свойством font-style, принимающим значение – italic.

Чтобы иметь возможность выделять жирным или курсивом различные участки текста, нужно создать  селекторы классов c этими свойствами, и при помощи тега  <span> вставлять их в нужные места.

Пример:

Посмотрим результат.

Результат применения свойств CSS - font-weight: bold; и font-style: italic;

Растянутый и сжатый шрифт

У шрифта можно изменить расстояние между символами и словами.

Для изменения расстояния между символами применяется свойство css letter-spacing

Результат:

Заголовок

Для изменения расстояния между словами применяется свойство word-spacing

Результат:

Большой заголовок

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

starper55plys.ru


You May Also Like

About the Author: admind

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.

Adblock
detector