Правило @font-face

Внедрение шрифтов — EOT и @font-face

Уже более десяти лет веб-страницы ограничены так называемым безопасным для интернета набором шрифтов. Один из таких наборов был составлен компанией Microsoft ещё в 1996 году.

Arial, Courier New, Georgia, Helvetica, Palatino, Times, Times New Roman, Lucida Sans, Trebuchet, Verdana и ещё несколько красавцев — это те шрифты, которые используются почти на всех страницах интернета.

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

Пример внедрения шрифтов в форматах EOT и OTF.

EOT — Embedded OpenType

Технология Embedded OpenType (встраиваемый формат OpenType) появилась в 1997 году.

То есть возможность полноценно использовать любой шрифт на сайте существовала все эти годы, начиная с Internet Explorer 4! Но монополия Microsoft препятствовала популяризации этой технологии.

Также свою роль сыграл единственный на то время конкурент Internet Explorer — Netscape, который продвигал другую технологию внедрения шрифтов — TrueDoc.

Технология EOT сжимает и конвертирует шрифты форматов TrueType и OpenType (кроме OpenType PS) в формат EOT.

Обратите внимание

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

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

До недавнего времени одним из недостатков EOT являлось то, что конвертировать шрифт можно было только с помощью эксклюзивного инструмента от Майкрософта — WEFT (Web Embedding Fonts Tool), который работает только на операционных системах Windows. Вторым, менее значимым недостатком считались “Технические средства защиты авторских прав” — ТСЗАП, задача которых — препятствовать неправомерному копированию файлов.

Устранить эти недостатки удалось благодаря заявлению Microsoft сделать открытыми формат EOT и спецификацию MTX (MicroType Express).

Майкрософт проявила эту инициативу в начале 2008 года, и несколько месяцев спустя, в конце этого же года, было организованно небольшое собрание в W3C с предложением создать Рабочую группу по шрифтам (Fonts WG). На собрании присутствовали представители компаний Bitstream, Microsoft, Mozilla, Opera, W3C, Nokia, Monotype и Inventive Designers.

В ходе дискуссии был выдвинут альтернативный вариант — вместо того, чтобы создавать новый контейнер с так называемой “корневой строкой”, как это делает EOT, можно добавлять эту строку непосредственно в форматы TrueType и OpenType. Ещё один вариант — “закрывать” начальные 100 битов информации, что будет препятствовать использованию интернет-шрифта локально на компьютере.

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

Важно

Даже прозвучало возможное расширение нового контейнера — TTW (TrueType-W). Недостаток возможной альтернативы — создание с нуля механизма работы предложенного формата.

Но полагается, что для новых приложений, внедрить предложенную схему будет легче, чем внедрить уже существующий EOT.

Зачем вообще использовать EOT или TTW?

Ответ на этот вопрос достаточно очевиден — данные механизмы защищают шрифты от нелегального использования. Цена за лицензию на шрифт может достигать несколько сотен, а то и тысяч долларов.

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

CSS-правило @font-face

Источник: http://www.umade.ru/log/2009/07/font-embed-eot-font-face/

CSS @font-face Rule

Укажите шрифт с именем «мифирстфонт» и укажите URL-адрес, по которому его можно найти:

@font-face {     font-family: myFirstFont;     src: url(sansation_light.woff);

}

Подробнее примеры ниже.

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

С @font-face правило, веб-дизайнеры не должны использовать один из «веб-безопасный» шрифты больше.

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

Совет: Используйте строчные буквы для URL-адреса шрифта. Прописные буквы могут дать неожиданные результаты в IE!

Чтобы использовать шрифт для элемента HTML, обратитесь к имени шрифта (мифирстфонт) через свойство Font-Family:

div {     font-family: myFirstFont;

}

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

Правило @font-face поддерживается в Internet Explorer, Firefox, Opera, Chrome и Safari.

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

Font format
TTF/OTF 4.0 9.0* 3.5 3.1 10.0
WOFF 5.0 9.0 3.6 5.1 11.1
WOFF2 36.0 Не поддерживается 35.0* Не поддерживается 26.0
SVG 4.0 Не поддерживается Не поддерживается 3.2 9.0
EOT Не поддерживается 6.0 Не поддерживается Не поддерживается Не поддерживается

*EDGE и IE: шрифт формат работает только тогда, когда установлено, что «устанавливаемые».

*Firefox: отключен по умолчанию, но может быть включен (нужно установить флаг «true», чтобы использовать вофф2).

Синтаксис

@font-face {
    font-properties
}

Font descriptorValuesОписание
font-family name Обязательно. Определяет имя шрифта.
src URL Обязательно. Определяет URL-адрес, где должен быть загружен шрифт из
font-stretch normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expandedultra-expanded Дополнительные. Определяет способ растягивания шрифта. Значение по умолчанию — «Normal»
font-style normal italicoblique Дополнительные. Определяет способ начертания шрифта. Значение по умолчанию — «Normal»
font-weight normal bold 100 200 300 400 500 600 700 800900 Дополнительные. Определяет смелость шрифта. Значение по умолчанию — «Normal»
unicode-range unicode-range Дополнительные. Определяет диапазон символов Юникода, поддерживаемых шрифтом. Значение по умолчанию — «U + 0-10ffff»

Другие примеры

Необходимо добавить еще одно правило @font-грани, содержащее дескрипторы для полужирного текста:

@font-face {    font-family: myFirstFont;    src: url(sansation_bold.woff);     font-weight: bold;

}

Файл «сансатион_болд. woff» — это другой файл шрифта, содержащий жирные символы для шрифта.

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

Таким образом, вы можете иметь много @font-face правила для одного и того же шрифта.

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

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

Источник: https://html5css.ru/cssref/css3_pr_font-face_rule.php

Правило @font-face [Love Soft]

p:css:font-face

Правило @font-face html5book.ru

браузеры поддерживают лишь несколько гарнитур, так называемых «безопасных для веб» шрифтов. В стандартный набор входят следующие шрифты: Arial, Verdana, Times, Georgia, Courier New и несколько других.

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

Шрифт — это набор символов конкретного размера, веса и стиля. Например, шрифт Times New Roman стиль italic размера 16px — это один шрифт, а Times New Roman стиль italic размера 10px — это уже другой.

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

Правило @font-face нужно размещать перед всеми остальными правилами css, так как этот прием улучшит производительность страницы. Загружаемые шрифты можно помещать в специальную папку fonts, созданную на сервере.

Чтобы подключить шрифт с помощью правила @font-face, нужно:

  • 1) загрузить файл шрифта на сервер в нескольких форматах для поддержки всеми браузерами,
  • 2) указать название шрифта, прописать ссылку на файл и задать описание шрифта,
  • 3) добавить имя шрифта в свойство font-family элемента, который будет отображаться данным шрифтом.

Шрифту можно присвоить любое название.

@font-face { font-family: «WebFont»; src: url(WebFont.eot?) format(«eot»), /* IE8+, знак ? позволяет обойти баг в обработчике значения src */ url(WebFont.woff) format(«woff»), /* все современные браузеры, IE9+ */ url(WebFont.ttf) format(«truetype»); /* все современные браузеры */
}
p {font-family: «WebFont», Arial, sans-serif; }

Этот код говорит браузеру отображать текст внутри элемента

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

Таким образом, нужно загрузить как минимум два файла: .ttf и .woff. Или даже только .woff.

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

@font-face { font-family: «WebFont»; src: url(WebFont.eot?) format(«eot»), url(WebFont.woff) format(«woff»), url(WebFont.ttf) format(«truetype»); font-weight: bold; font-style: italic;
}
@font-face { font-family: «WebFont»; src: url(WebFont.eot?) format(«eot»), url(WebFont.woff) format(«woff»), url(WebFont.ttf) format(«truetype»); font-weight: 400; font-style: normal;
}

В общем виде для шрифта можно задать следующие свойства:

@font-face { font-family: «FontName»; src: url() format(» «); font-variant: ; font-stretch: ; font-weight: ; font-style: ;
}

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

@font-face { font-family: «WebFont»; src: local(«WebFont»), url(WebFont.eot?) format(«eot»), url(WebFont.woff) format(«woff»), url(WebFont.ttf) format(«truetype»); font-weight: bold; font-style: italic;
}

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

Порядок перечисления форматов: Если имеется файл шрифта типа WOFF, укажите этот файл первым, т.к. данный формат предоставляет наилучшее качество шрифта. Следующим укажите файл шрифта формата TTF или OTF, а самым последним — файл формата SVG.

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

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

Важно! Если в названии шрифта имеются пробелы или символы (например, #, $, %), то оно заключается в кавычки. Это делается для того, чтобы браузер мог понять, где начинается и заканчивается название шрифта.

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

normal

italic — курсив

oblique — наклонное начертание шрифта.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

h1 {font-style: italic;}

Насыщенность шрифта

normal — устанавливает нормальную насыщенность шрифта. Эквивалентно 400.

bold полужирный. Эквивалентно 700.

bolder Насыщенность шрифта будет больше, чем у предка.

lighter Насыщенность шрифта будет меньше, чем у предка.

100, 200, 300, 400, 500, 600, 700, 800, 900 — Значение 100 соответствует самому легкому варианту начертания шрифта, а 900 — самому плотному. При этом, эти числа не определяют конкретной плотности, т.е.

Совет

100, 200, 300 и 400 могут соответствовать одному и тому же варианту слабой насыщенности начертания шрифта; 500 и 600 — средней насыщенности, а 700, 800 и 900 могут выводить одинаковое очень насыщенное начертание.

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

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

span {font-weight: lighter;}
h1 {font-weight: 100;}

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

normal выводит текст обычным начертанием.

small-caps Все строчные буквы заменяются на малые прописные

Читайте также:  Обзор криптобиржи binance

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

h1 {font-variant: small-caps;}

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

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

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

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

relative-size — smaller, larger. Относительные размеры элемента относительно родителя. При этом размер шрифта может выйти за рамки размеров, предполагаемых для xx-small и xx-large.

absolute-size — xx-small, x-small, small, medium, large, x-large, xx-large. коэффициент масштабирования между двумя соседними абсолютными размерами составляет примерно 1,5 при переходе от меньшего к большему и 0,66 при переходе от большего к меньшему. В качестве стандартного размера принимается medium.

h3 {font-size: small;}
h1 {font-size: xx-large;} p {font-size: 20px;}
h3 {font-size: 120%;}

Свойство наследуется. Значения:

RGB()

HEX — #RRGGBB

RGBA — RGB, расширенная параметром Alpha, который используется для управления смешиванием цветов. Последнее число определяет степень прозрачности, задается значением от 0 до 1, где 0 соответствует полной прозрачности, а 1 — непрозрачности.

HSL — Hue, Saturation, Lightness. Первое значение — оттенок — определяется градусом поворота цветового спектра по часовой стрелке от 0° до 360°, где 60° — желтый, 120° — зеленый, 180° — голубой, 240° — синий, 300° — фиолетовый.

Второе значение определяет насыщенность выбранного оттенка и указывается в процентах в диапазоне от 0% до 100%. Чем ближе данное значение к 100%, тем цвет более чистый и сочный. Светлота или яркость (Lightness) указывается в процентах, чем выше процент, тем ярче становится цвет.

Значения 0% и 100% обозначают соответственно чёрный (отсутствие света) и белый (засвеченный) цвета, в независимости от того, какой оттенок из цветового круга был выбран изначально.

HSLA

имя цвета — В настоящий момент существует 140 названий цветов.

initial Устанавливает значение свойства в значение по умолчанию.

inherit Наследует значение свойства от родительского элемента.

body {color: grey;}
h1 {color: #00ff00;}
strong {color: rgb(0,0,255);}
p {color: rgb(0%,0%,100%);}
span {color: rgba(255,0,0,0.3);}
h1 {color: hsl(120,100%,50%);}
h1 {color: hsla(120,100%,50%,0.3);}

Обратите внимание

Свойство font объединяет все свойства шрифта, используемого на веб-странице. Если явное значение какого-либо свойства не нужно, то оно опускается.

font: font-style font-variant font-weight font-size/line-height font-family

Например:

p {font: italic bold 14px/1.5 Times, 'New Century Schoolbook', serif;}

TrueType (TTF): TTF – формат шрифта, разработанный Microsoft и Apple в 1980-х. Современные файлы TTF также называют TrueType OpenType шрифты. TTF полезен для расширения поддержки старых браузеров, особенно мобильных при необходимости.

Embedded OpenType (EOT): EOT – старый формат, разработанный Microsoft. EOT необходим для рендера шрифтов в старых версиях IE. EOT часто предоставляют в несжатом виде, поэтому если вам не нужно поддерживать IE8 и ниже, то лучше отказаться от этого формата.

OTF (OpenType Font) работает в большинстве браузеров как и ttf.

Web Open Font Format (WOFF): WOFF разработан в 2009 – это формат-обертка для шрифтов TrueType и OpenType. Формат сжимает файлы и поддерживается во всех современных браузерах.

Технически WOFF нельзя назвать форматом шрифта, так как он представляет собой лишь оболочку с функцией сжатия. Формат сжимает шрифты в формате TTF/OTF для использования их в интернете. Также, WOFF позволяет добавлять к файлу метаданные, например, сведения о лицензии.

Web Open Font Format 2 (WOFF2

Источник: http://xlench.bget.ru/doku.php/p/css/font-face

Подключение нестандартных шрифтов. Часть первая

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

§Форматы файлов шрифтов

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

  • eot — для Internet Explorer =9 и декстопных браузеров на webkit(Chrome, Safari и т.д.);
  • ttf — поддерживается всеми браузерами за исключением IE(всех версий);
  • svg поддерживается всеми браузерами на webkit, включая мобильные;

Самыми легковесными являются форматы woff и eot. Например, разница между woff и ttf может достигать 100%.

§Кроссбраузерный @font-face

Исходя из поддержки форматов браузерами, мы теперь можем составить @font-face, который будет работать везде, включая мобильные браузеры.

@font-face { font-family: 'PT Sans'; src: url('ptsans.eot'); src: url('ptsans.eot?#iefix') format('embedded-opentype'), url('ptsans.woff') format('woff'), url('ptsans.ttf') format('truetype'); }

§Оптимизация

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

@font-face { font-family: 'PT Sans'; src: url('ptsans.eot'); src: url('ptsans.eot?#iefix') format('embedded-opentype'), url('ptsans.woff') format('woff'); }

Кроме этого, у font-face есть еще одно правило, которое позволяет оптимизировать загрузку вашей страницы — это local. C помощью него мы можем проверить наличие шрифта на компьютере пользователя, и если таковой отсутствует, инициировать его загрузку. В local указывается полное наименование шрифта и его PostScript Name.

Вот такая запись font-face проверит наличие шрифта на компьютере:

@font-face { font-family: 'PT Sans'; src: url('ptsans.eot'); src: local('PT Sans'), local('PTSans-Regular'), url('ptsans.eot?#iefix') format('embedded-opentype'), url('ptsans.woff') format('woff'); }

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

§Кроссдоменность

Шрифты — это статика, которую многие предпочитают хранить на каком-нибудь отдельном домене, где настроено кэширование, или на стороннем хранилище(в облаке). Однако при загрузке шрифта с другого домена возникают проблемы в Firefox и Internet Explorer. Все дело в политике безопасности этих браузеров, они не позволяют загружать шрифты со сторонних доменов и даже с поддоменов.

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

Еще одним решением проблемы является управление политикой безопасности на домене, с которого идет загрузка файла шрифта. Для сервера на Apache в .htaccess можно прописать Access-Control-Allow-Origin *. Такая запись позволит всем доменам загружать контент с отдающего сервера. Для IE и Firefox этого достаточно.

На этом мы закончим первую часть. В следующей части расскажем про плюсы и минусы подключения шрифтов через font-family и font-weightfont-style. В результате покажем итоговый font-face.

Источник: https://fontstorage.com/blog/about-font-face-part-one/

Как правильно подключать шрифты при помощи CSS? Правило @font-face

Вам попался капризный заказчик, требующий «расписные» шрифты? Или вы просто создаете стильный тематический сайт, и кастомное написание текста подчеркнет вашу авторскую идею? Рассмотрим один из способов решения данной задачи.

Когда бывает нужно

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

  • Стильное меню.
  • Стильные заголовки.
  • Логотип. Создание логотипа – дело серьезное, много книг по этому поводу написано, долго специалисты этому делу обучаются… И автор не станет отбирать у людей их хлеб, но вставит свои пять копеек. Если ваш логотип представляет собой текст, то в целях качественной SEO оптимизации выводить его следует как ТЕКСТ.

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

Пути решения

Как и в большинстве случаев, любое задание имеет несколько путей решения, и наше – не исключение. Поехали:

  • Картинка. Отсутствует гибкость настройки, ухудшается скорость загрузки страниц, увеличивается нагрузка на сервер, SEO вообще не при делах.
  • Flash. Дополнительные файлы для загрузки, нужны навыки работы в Flash-эдиторах (параметры текста менять тоже здесь), средняя SEO.
  • JS. Дополнительные внешние файлы (и все, что из этого вытекает), средняя SEO, текст невозможно скопировать.
  • Нестандартные font-ы средствами CSS

Истинный путь самурая, или «да здравствует CSS»

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

CSS:

@font-face { font-family: AlexBrush-Regular; src: local(«AlexBrush-Regular»), url(«./AlexBrush-Regular. otf «); }

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

Конструкция такого вида позволяет подключить TrueType (ttf) и OpenType (otf) шрифты.

Интересно: OpenType обладает бо́льшими по сравнению с TrueType возможностями предпечатной подготовки и поддерживает бо́льший набор символов при меньшем размере файла.

Важно

Казалось бы, на этом тему можно было и закрыть, но есть одно НО… Вспомним о наших «особенных» друзьях, а именно о браузерах семейства IE. Для внедрения нестандартного шрифта в IE шрифт должен быть в Embedded OpenType (eot) формате.

Это мало не единственный случай, когда особенность IE приносит больше пользы, чем вреда. Дело в том, что eot формат подразумевает:

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

Приняв к сведению выше сказанное, модифицируем наш пример:

CSS:

@font-face { font-family: AlexBrush-Regular; src: local(«AlexBrush-Regular «), url(./ AlexBrush-Regular.eot);
}
 
@font-face { font-family: AlexBrush-Regular; src: local(«AlexBrush-Regular»), url(«./AlexBrush-Regular. otf «); }

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

CSS:

@font-face { font-family: » AlexBrush-Regular «; src: url(«AlexBrush-Regular.eot»); src: url(«AlexBrush-Regular.eot?#iefix») format(«embedded-opentype»), url(«AlexBrush-Regular.svg#JournalRegular») format(«svg»); url(«AlexBrush-Regular.woff») format(«woff»), url(«AlexBrush-Regular.otf «) format(«truetype»), }

Важно!!!

  1. Гибкость. Настройка и изменение параметров текста не составляет труда.
  2. Скорость. Минимальное число дополнительных файлов для загрузки, не тормозит страницу как такое же количество элементов на js и Flash.
  3. SEO. Текст остался текстом – плюсы очевидны.
  4. Пример работоспособен в браузерах начиная с: IE4, Op, Fx3.5, Cr2, Sa1.
  5. Перед применением шрифта нужно провести его оптимизацию (читайте послесловие).
  6. При использовании покупных шрифтов нужно побеспокоится об их безопасности.
  7. Если пропускная способность канала связи маленькая, то пока не подгрузится файл шрифта, пользователь либо увидит простой шрифт на месте нестандартного, либо не увидит ничего в принципе.

Послесловие

Оптимизация шрифта

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

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

А нужно ли нам такое разнообразие? Ведь для придания пикантного стилевого оттенка, нам (в зависимости от ситуации) не обязательно нужны знаки препинания, разнообразные символы.

По правде говоря, и разные начертания не всегда нужны. Или допустим, вы оптимизируете свой сайт строго под рунет, без латыни можно обойтись…

Ну, суть Вы уже уловили. Шрифт нужно оптимизировать:

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

Как это сделать? На просторах интернета существует целый ряд сервисов, позволяющих выполнить необходимые операции, например: font-face Generator, Online Font Converter, Web Font Optimizer и др.

Защита

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

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

Читайте также:  Операции над числами в php

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

Существуют, конечно, новые разработки – например, формат WOFT, в котором вопрос защиты снимается аналогично eot, но к сожалению, он пока не может похвастаться полной поддержкой в браузерах.

Также вы можете просто применить бесплатные шрифты.

Источник: https://vaden-pro.ru/blog/css/podklyuchenie-shriftov-css-font-face

@font-face


This is Bitstream Vera Serif Bold.

In this example, the user's local copy of «Helvetica Neue Bold» is used; if the user does not have that font installed (two different names are tried), then the downloadable font named «MgOpenModernaBold.ttf» is used instead:

@font-face { font-family: MyHelvetica; src: local(«Helvetica Neue Bold»), local(«HelveticaNeue-Bold»), url(MgOpenModernaBold.ttf); font-weight: bold;
}

Font MIME Types

FormatMIME type
TrueType font/ttf
OpenType font/otf
Web Open File Format font/woff
Web Open File Format 2 font/woff2

Notes

  • Web fonts are subject to the same domain restriction (font files must be on the same domain as the page using them), unless HTTP access controls are used to relax this restriction.
  • @font-face cannot be declared within a CSS selector. For example, the following will not work:.className { @font-face { font-family: MyHelvetica; src: local(«Helvetica Neue Bold»), local(«HelveticaNeue-Bold»), url(MgOpenModernaBold.ttf); font-weight: bold; } }

Specifications

Browser compatibility

Update compatibility data on GitHub

DesktopMobileChromeEdgeFirefoxInternet ExplorerOperaSafariAndroid webviewChrome for AndroidEdge MobileFirefox for AndroidOpera for AndroidSafari on iOSSamsung Internet@font-face

WOFF

WOFF 2

SVG fontsDeprecatedNon-standard

font-display

font-family

font-feature-settings

font-variation-settings

font-style

font-weight

src

unicode-range

Chrome Full support 4 Edge Full support 12 Firefox Full support 3.5 IE Full support 4 Opera Full support 10 Safari Full support 3.1 WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support 12 Firefox Android Full support 4 Opera Android Full support 10 Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support 6 Edge Full support Yes Firefox Full support 3.5 IE Full support 9 Opera Full support 11.1 Safari Full support 5.1 WebView Android Full support 4.4 Chrome Android Full support Yes Edge Mobile Full support Yes Firefox Android Full support 4 Opera Android Full support 11 Safari iOS Full support 5 Samsung Internet Android Full support Yes
Chrome Full support 36 Edge Full support 14 Firefox Full support 39Full support 39Full support 35DisabledDisabled From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. IE No support No Opera Full support 23 Safari Full support 10NotesFull support 10NotesNotes Supported only on macOS 10.12 (Sierra) and later. WebView Android Full support 37 Chrome Android Full support 36 Edge Mobile Full support 14 Firefox Android Full support 39Full support 39Full support 35DisabledDisabled From version 35: this feature is behind the gfx.downloadable_fonts.woff2.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Opera Android Full support 23 Safari iOS Full support 10 Samsung Internet Android Full support 3.0
Chrome No support No Edge No support No Firefox No support No IE No support No Opera No support No Safari Full support Yes WebView Android No support No Chrome Android No support No Edge Mobile No support No Firefox Android No support No Opera Android No support No Safari iOS Full support Yes Samsung Internet Android No support No
Chrome Full support 60 Edge No support No Firefox Full support 58 IE No support No Opera Full support 47 Safari Full support Yes WebView Android Full support 60 Chrome Android Full support 60 Edge Mobile No support No Firefox Android Full support 58 Opera Android Full support 47 Safari iOS Full support Yes Samsung Internet Android No support No
Chrome Full support 4 Edge Full support 12 Firefox Full support 3.5 IE Full support 6 Opera Full support 9 Safari Full support 3.1 WebView Android Full support 2.2 Chrome Android ? Edge Mobile Full support 12 Firefox Android Full support 4 Opera Android Full support 12 Safari iOS Full support 3.1 Samsung Internet Android Full support Yes
Chrome No support No Edge No support No Firefox Full support 34NotesFull support 34NotesNotes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.Full support 15Prefixed NotesPrefixed Implemented with the vendor prefix: -moz-Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4. IE No support No Opera No support No Safari No support No WebView Android No support No Chrome Android No support No Edge Mobile No support No Firefox Android Full support 34NotesFull support 34NotesNotes The ISO/IEC CD 14496-22 3rd edition suggests using the ssty feature to provide glyph variants more suitable for use in scripts (for example primes used as superscripts). Starting with Firefox 29, this is done automatically by the MathML rendering engine. The ISO/IEC CD 14496-22 3rd edition also suggests applying the dtls feature to letters when placing mathematical accents to get dotless forms (for example dotless i, j with a hat). Starting with Firefox 35, this is done automatically by the MathML rendering engine. You can override the default values determined by the MathML rendering engine with CSS.Full support 15Prefixed NotesPrefixed Implemented with the vendor prefix: -moz-Notes From Firefox 4 to Firefox 14 (inclusive), Firefox supported an older, slightly different syntax. See OpenType Font Feature support in Firefox 4. Opera Android No support No Safari iOS No support No Samsung Internet Android No support No
Chrome Full support 62 Edge No support No Firefox Full support 60DisabledFull support 60DisabledDisabled From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. IE No support No Opera Full support 49 Safari No support No WebView Android Full support 62 Chrome Android Full support 62 Edge Mobile No support No Firefox Android Full support 60DisabledFull support 60DisabledDisabled From version 60: this feature is behind the layout.css.font-variations.enabled preference (needs to be set to true). To change preferences in Firefox, visit about:config. Opera Android Full support Yes Safari iOS No support No Samsung Internet Android No support No
Chrome Full support 4 Edge ? Firefox Full support 3.5 IE Full support 4 Opera Full support 10 Safari Full support 3.1 WebView Android Full support Yes Chrome Android ? Edge Mobile ? Firefox Android Full support 4 Opera Android Full support 10 Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support 4 Edge Full support 12 Firefox Full support 3.5 IE Full support 4 Opera Full support 10 Safari Full support 3.1 WebView Android Full support Yes Chrome Android Full support Yes Edge Mobile Full support 12 Firefox Android Full support 4 Opera Android Full support 10 Safari iOS Full support Yes Samsung Internet Android Full support Yes
Chrome Full support 4 Edge Full support 12 Firefox Full support 3.5 IE Full support 6 Opera Full support 9 Safari Full support 3.1 WebView Android Full support 2.2 Chrome Android ? Edge Mobile Full support 12 Firefox Android Full support 4 Opera Android Full support 12 Safari iOS Full support 3.1 Samsung Internet Android Full support Yes
Chrome Full support Yes Edge Full support Yes Firefox Full support 36 IE Full support 9 Opera Full support Yes Safari Full support Yes WebView Android ? Chrome Android ? Edge Mobile Full support Yes Firefox Android Full support 36 Opera Android ? Safari iOS Full support Yes Samsung Internet Android Full support Yes

Full support  Full supportNo support  No supportCompatibility unknown  Compatibility unknownNon-standard. Expect poor cross-browser support.Non-standard. Expect poor cross-browser support.Deprecated. Not for use in new websites.Deprecated. Not for use in new websites.See implementation notes.See implementation notes.User must explicitly enable this feature.User must explicitly enable this feature.Requires a vendor prefix or different name for use.Requires a vendor prefix or different name for use.

See also

Источник: https://developer.mozilla.org/docs/Web/CSS/%40font-face

Эт-правила CSS: import, media, charset, font-face, page

Теория

В английском языке знак «@» произносят как «Эт». Эт-правила CSS начинаются со знака «@» и потому так называются

Эт-правила содержат внутри себя набор CSS-правил и применяют их к чему-то конкретному.

Импортирование

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

@import url(addonstyles.css);

Эта конструкция часто используется в месте, где элемент link ссылается на CSS файл HTML-страницы, имея при этом внутреннюю таблицу стилей, которая выглядит приблизительно так:

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

Медиа-типы

@ правило media применит содержимое к определенному типу медиа, например, к печати:

@media print { body { font-size: 10pt; font-family: times new roman, times, serif; } #navigation { display: none; } }

Возможные типы медиа:

  • all – правила CSS применяются ко всем возможным типам медиа
  • aural – для речевых синтезаторов.
  • handheld – для портативных устройств.
  • print – для принтеров.
  • projection – для проекторов.
  • screen – для дисплеев компьютеров.

Вы также можете использовать следующие типы медиа: braille, embossed, tty и tv.

Примечание: несмотря на все вышесказанное браузер IE поддерживает всего несколько медиа-типов – all, screen и print.

Кодировка

Правило charset просто устанавливает кодировку внешней таблицы стилей. Правило указывается в верхней части таблицы CSS и выглядит примерно так:

Читайте также:  Курс dash на сегодня

@charset «ISO-8859-1»;

Шрифтовой комплект (font-face)

Эт-правило font-face используется для детального описания шрифта и может использоваться для внедрения внешнего шрифта в ваш CSS. Правило требует наличия описателя font-family, к которому шрифт может отсылать и значением которого может быть имя текущего шрифта или полностью новое имя. Чтобы внедрить шрифт, используют описатель drc.

Другие описатели, добавленные в font-face, становятся условиями для шрифта, который используется. Например, если вы добавили стиль font-weight: bold в эт-правило, описатель src свойства font-family будет применяться к селектору со свойством font-family, если свойством font-weight будет bold.

Вы можете использовать похожее эт-правило font-face:

@font-face { font-family: somerandomfontname; src: url(somefont.eot); font-weight: bold; } p { font-family: somerandomfontname; font-weight: bold; }

Совет

Это правило применит шрифт somefont.eot к параграфам (за исключением случаев, когда для селектора p не установлено font-weight: bold).

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

Только Internet Explorer, похоже, обладает определенной степенью поддержки. Чтобы внедрять шрифты с IE, вам потребуется использовать приложение Microsoft WEFT, которое конвертирует символы формата TrueType в формат OpenType (и затем ими можно воспользоваться только по определенной вами ссылке).

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

Страницы

page регулирует постраничные медиа и является продвинутым способом применять стили к печатным медиа. Это правило определяет блок страницы, который расширяется на блочной модели (box model, подробнее см Margins и Padding). Благодаря этому правилу вы определяете размер и представление единой страницы.

Существует несколько соглашений, которые применяются к page: не должно быть полей или рамок; стиль создается не для показа на экране компьютера, поэтому не допускается использование в качестве единиц измерений пикселей (точек) и em.

Существует несколько определенных свойств, которые могут использоваться. Например, size может принимать значение portrait, landscape, auto или length. Свойство marks используется для определения метки кадрирования:

@page { size: 15cm 20cm; margin: 3cm; marks: cross; }

Псевдоклассы для постраничных медиа

Существует три псевдокласса, которые используются специально в связке с At правилом page. Выглядит их использование следующим образом:

@page :pseudo-class { stuff }.

:first — этот псевдокласс применяется к первой странице постраничных медиа.

:left и :right применяются для левых и правых страниц соответственно. Может использоваться для указания больших полей слева при печати левой страницы и справа – при печати правой страницы.

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

[ads-pc-1] [ads-mob-1]

Источник: https://hr-vector.com/osnovy/at-pravila-css

Что такое @font-face и как его использовать в CSS

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

Почему это круто?

Как я уже сказал, @font-face открывает «новый мир» для веб-дизайнера. Теперь мы можем по новому использовать типографику, а не ограничиваться «безопасными» шрифтами. Именно благодаря этому правилу Вы все чаще встречаете новые шрифты в оформлении сайтов и видите как типографика становится новым элементов веб-дизайна.

Кроме того, @font-face не использует изображения для визуализации, а выводит настоящий текст, что благоприятно сказывается на SEO и доступности контента.

Как использовать @font-face

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

@font-face { font-family: DeliciousRoman; src: url('http://www.font-face.com/fonts/delicious/Delicious-Roman.otf');
}

Затем уже его можно использовать.

p { font-family: DeliciousRoman, Helvetica, Arial, sans-serif;
}

Вот и все!

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

@font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf');
}

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

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

И третье, это font-weight, определяющий насколько «толстым» должно быть начертание букв.

@font-face { font-family: DeliciousRoman; src: url('…/Delicious-Roman.otf'); font-stretch: condensed; font-style: oblique; font-weight: bold;
}

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

Несколько советов

Используя @font-face все же не забывайте подстраховываться и указывать дополнительные, универсальные шрифты вроде Arial и Times New Roman, для рубленных шрифтов и шрифтов с засечками, соответственно. Конечно это не обязательно должны быть именно эти 2 шрифта, но подстраховаться стоит обязательно.

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

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

Кроссбраузерность @font-face

Не все браузеры поддерживают @font-face!

Сейчас @font-face поддерживают:

  • Firefox
  • Opera
  • Chrome
  • Safari
  • Internet Explorer 9

Не самый плохой список, но не забывайте о старых браузерах при использовании @font-face. Кроме того, разные браузеры, поддерживают разные шрифты:

  • Internet Explorer: EOT
  • Mozilla browsers: OTF, TTF
  • Safari: OTF, TTF, SVG
  • Opera: OTF, TTF, SVG
  • Chrome: TTF, SVG

Правильный синтаксис @font-face

Пауль Ириш (Paul Irish) создал синтаксис для @font-face, таким образом чтобы он работал в разных браузерах. Чтобы узнать все детали, Вы можете почитать оригинальный пост по этому поводу Bulletproof @font-face syntax

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

@font-face { font-family: 'Graublau Web'; src: url('GraublauWeb.eot'); src: local('?'), url(«GraublauWeb.woff») format(«woff»), url(«GraublauWeb.otf») format(«opentype»), url(«GraublauWeb.svg#grablau») format(«svg»); font-weight: normal; font-style: normal;
}

Ресурсы по @font-face

Font Squirrel

Font Squirrel — это потрясающий сайт, с которым Вы просто обязаны ознакомиться. Если Вы не сделали этого ранее 🙂 Font Squirrel предоставляет коллекцию качественных и бесплатных шрифтов для скачивания. И в дополнение ко всему, имеется @font-face kit и @font-face генератор. @font-face kit позволит Вам использовать все типы шрифтов для обеспечения поддержки любого браузера.

@font-face kit’ы

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

@font-face kit generator

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

Вам так же остается только скачать комплект и использовать предстваленный в нем код на своем сайте. Это очень просто.

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

Источник: http://belyan.in/2013/01/chto-takoe-font-face-i-kak-ego-ispolzovat-v-css/

Правило @Font-Face и несколько уловок для работы с Web шрифтами

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

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

Форматы Web шрифтов

EOT, TTF, OTF, CFF, AFM, LWFN, FFIL, FON, PFM, PFB, WOFF, SVG, STD, PRO, XSF, и это далеко не всё. Наверное легче найти путь из джунглей, чем шрифт, который вам 100% подойдёт. Давайте взглянем на плюсы и минусы интеграции шрифтов.

TrueType

Этот формат был создан в далёком 1980 году в конкурсе Adobe’s Type 1 для PostScript. Этот формат, основанный на новых технологиях, заменил множество других, которые использовались к этому времени. Microsoft начал использовать формат TrueType, и вскоре он стал стандартным системным шрифтом.

OpenType

Когда-то давно Microsoft и Adobe объединились, чтобы создать данный формат. Как ни странно, но он основан на формате TrueType, но в него встроены дополнительные элементы, такие как лигатуры, контекстные символы и т.д. Однако многие браузеры до сих пор не поддерживают данный формат. Существует две разные версии формата OpenType, основанные на разных технологиях. Если поподробнее то вот:

  • OpenType с контурами TrueType (OpenType TT) и
  • OpenType с контурами PostScript (OpenType PS)

Шрифты, основанные на формате TrueType больше подходят для Web, и будет вообще клёво, если Microsoft решит все проблемы связанные с отображением. Структуры шрифтов TrueType и OpenType fonts очень схожи и поддерживаются в Safari 3.1 и выше, Firefox 3.5 и Opera 10 (и в новых версиях).

EOT

Internet Explorer поддерживает формат (EOT) начиная с 1990 года. В отличии от форматов TrueType и OpenType, он предоставляет следующие возможности:

  • Шрифты EOT более компактны, чем OpenType, что является значительным преимуществом для Web.
  • Шрифты EOT могут использоваться только в пределах домена. Это очень удобная вещь, т.к. помогает бороться за лицензированные права на шрифты.

Если вы хотите сконвертировать шрифт TTF в файл EOT, то можете воспользоваться инструментом EOTFast (бесплатный), доступный только для пользователей Windows.

WOFF

В отличии от EOT, формат WOFF отрекомендован знакомой вам организацией W3C, которая опубликовала первую версию WOFF в июле 2010.

На самом деле формат WOFF это новое скрещивание форматов TrueType и OpenType, что по сути не делает его новым.

WOFF использует алгоритм, который называется zlib, что позволяет значительно уменьшить вес файла, примерно на 40%. Более того, в этот шрифт можно добавлять мета данные, такие как лицензию и т.д. Однако такие данные не могут валидироваться браузерами.

Источник: https://ruseller.com/lessons.php?id=1066&rub=29

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