Css как подключить шрифты otf

Подключение веб-шрифтов с помощью @font-face

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

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

Подключение веб-шрифтов с помощью @font-face:

Существует несколько форматов веб-шрифтов. Наиболее распространенные из них: EOT, WOFF, OTF или TTF,

Формат EOT, который понимают браузеры IE вплоть до версии 8. Собственно, этот формат шрифта создан и существует только ради этого браузера и таких его версий. Чтобы получить шрифт формата EOT, необходимо специальное программное обеспечение для преобразования формата TTF в OET.

Формат WOFF (Web Open Font Format) является наилучшим на сегодняшний день для использования в Веб: самый маленький и легкий, поддерживается всеми современными браузерами (в том числе IE9 и выше); этот формат был создан специально для Веб. Фактически — это облегченная версия формата TTF или OTF.

Форматы OTF (Open Type Font) и TTF (True Type Font) — это самые обычные компьютерные шрифты, которые используются в большинстве операционных систем (Windows, Macintosh, Linux) и в приложениях под эти системы. Но, помимо этого, такие шрифты можно легко использовать и в Интернете.

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

Благодаря этому изображения в таком формате масштабируются без потери качества — при увеличении размера картинки компьютеру достаточно пересчитать векторные точки. Особенность этого формата графики позволила применить его для создания “шрифтов”. То есть, обычный шрифт преобразуется в формат SVG, где каждый шрифт — это фактически картинка в масштабируемом формате SVG.

Зачем потребовались такие трудности? Все дело в том, что браузеры под ОС Android (очень распространенная ОС под мобильные устройства) могут отображать веб-шрифты только в этом формате. Браузеры под iPhone (Safari 4.1 и ниже) также не умеют распознавать веб-шрифт. Вот этим “неумехам” и подсовывают картинки в виде шрифтов — “не умеешь кушать обычную пищу, так кушай хотя бы это!”.

Правовой вопрос использования шрифтов

Вопрос можно кратко cформулировать в следующих двух предложениях. Все шрифты делятся на платные или бесплатные.

Платные шрифты делятся на те, которые:

Чтобы не заморачиваться решением запутанного вопроса лицензии на шрифты, можно воспользоваться веб-службами Google Fonts или TypeKit, на которых собраны все шрифты, которые можно использовать в Веб. Шрифты на этих серверах либо бесплатные (Google Fonts), либо платные (TypeKit).

Краткий список источников бесплатных шрифтов, которые можно использовать в Веб:

• The League of Movable Type (https://www.theleagueofmoveabletype.com/)
• FontSquirrel (http://www.fontsquirrel.com/)
• Google Fonts (https://www.google.com/fonts)
• The Open Font Library (http://openfontlibrary.org/ru)
• Fontex.org (http://fontex.org/)
• Exljbris Font Foundry (http://www.exljbris.com/)

Большинство веб-сервисов, которое предоставляет шрифты для Веб, “отдают” их в формате OTF или TTF. Поэтому нужно конвертировать этот шрифт в четыре формата, описанных выше, для того, чтобы максимальное число посетителей сайта смогло увидеть на своих устройствах содержимое данного сайта. Для конвертирования не нужно искать специальное программное обеспечение. Можно воспользоваться бесплатным генератором @font-face Generator, находящемся на сервере FontSquirrel (http://www.fontsquirrel.com/).

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

@font-face font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot#iefix') format('embedded-opentype'), url('PTSansRegular.woff') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); >

• EOT — формат только для Internet Explorer 8 и ниже
• WOFF — самый современный и маленький по размеру шрифт, который понимают большинство современных браузеров
• TTF — сравнительно большой по размеру шрифт и достаточно устаревший
• SVG — самый большой по размеру и объему шрифт, поэтому его необходимо размещать в самой последней строке. К тому же, этот формат шрифта используется только в браузерах ОС Android или в браузере Safari 4 (то есть, iPhone)

h1 font-family: 'League Gothic', Arial, sans-serif; font-weight: normal; >

Правильное применение подключенного web-шрифта League Gothic. Здесь указывается на первом месте имя подключенного шрифта, а затем — резервные шрифты, которые заведомо установлены в системе пользователя (имя шрифта, гарантировано имеющегося в системе и семейство шрифтов).

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

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

Виды шрифтов

На самом деле это не так. Или не совсем так. Браузер действительно отрисовывает шрифт указанным ему способом, но вот с самим шрифтом он ничего сделать не может. Он просто берет указанное тегом начертание шрифта и выводит его на экран. Дело в том, что дизайнеры или компании, занимающиеся разработкой шрифтов, создают шрифты таким образом: художник рисует четыре набора одного и того же шрифта. То есть, рисуется набор символов в обычном начертании (regular), затем рисуется набор символов в курсивном начертании (italic), потом набор символов в полужирном начертании (bold), и наконец набор символов в полужирном курсивном начертании (bold italic). Все эти четыре набора символов фактически являются отдельными шрифтами, хотя и носят одно общее название (Georgia, Tahoma, Helvetica и так далее).

Простой способ подключения веб-шрифта

@font-face font-family: 'PTSans'; src: url('PTSansRegular.eot'); src: url('PTSansRegular.eot#iefix') format('embedded-opentype'), url('PTSansRegular.woff') format('woff'), url('PTSansRegular.ttf') format('truetype'), url('PTSansRegular.svg') format('svg'); font-weight: normal; font-style: normal; > @font-face font-family: 'PTSans'; src: url('PTSansItalic.eot'); src: url('PTSansItalic.eot#iefix') format('embedded-opentype'), url('PTSansItalic.woff') format('woff'), url('PTSansItalic.ttf') format('truetype'), url('PTSansItalic.svg') format('svg'); font-weight: normal; font-style: italic; > @font-face font-family: 'PTSans'; src: url('PTSansBold.eot'); src: url('PTSansBold.eot#iefix') format('embedded-opentype'), url('PTSansBold.woff') format('woff'), url('PTSansBold.ttf') format('truetype'), url('PTSansBold.svg') format('svg'); font-weight: bold; font-style: normal; > @font-face font-family: 'PTSans'; src: url('PTSansBoldItalic.eot'); src: url('PTSansBoldItalic.eot#iefix') format('embedded-opentype'), url('PTSansBoldItalic.woof') format('woff'), url('PTSansBoldItalic.ttf') format('truetype'), url('PTSansBoldItalic.svg') format('svg'); font-weight: bold; font-style: italic; >

Источник

Подключение шрифтов в CSS

Если не вникать в подробности, по быстрому подключить шрифт можно так:

/* Обычный */ @font-face < font-family: 'FontName'; src: url(/fonts/font.ttf); >/* Жирный */ @font-face < font-family: 'FontName bold'; src: url(/fonts/font-bold.ttf); >.text-1 < font-family: 'FontName'; font-size: 20px; >.text-2

Такой метод вполне работает в большинстве браузеров, но неверен. В данном примере упущено:

• Нет названия шрифта в свойстве local .
• Подключен только один формат шрифта.
• Неправильно настроены начертания.

Локальные шрифты

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

Можно указать несколько названий:

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

Сегодня используются четыре формата, рассмотрим их подробнее:

TTF/OTF – работают в большинстве браузеров, кроме IE.

EOT – создан Microsoft, представляет сжатую копию шрифта TTF, поддерживается только в IE.

WOFF – формат представляет собой сжатый шрифт в формате TTF/OTF.

WOFF2 – имеет улучшенное сжатие, по сравнению с первой версией.

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

• WOFF2 для современных браузеров.
• WOFF для браузеров, которые не поддерживают WOFF2.
• TTF для устаревших браузерах
• EOT для поддержки IE.

Если в наборе есть не все форматы, их можно получить перекодировкой с помощью сервисов onlinefontconverter.com или convertio.co.

Разные начертания шрифтов

Пример подключения шрифта «Crimson Text» в разных начертаниях:

Обычный:

Источник

Css как подключить шрифты otf

CSS шрифты

Я еще раз вас приветствую и поехали. CSS нам предлагает подключение таких шрифтов как Verdana, Arial, Tahoma, Times New Roman и т.п., но бывает и этого не всегда достаточно,и мы хотим найти и подключить какой нибудь экзотический шрифт.

И самое первое что мы можем сделать это подключить шрифт с какого нибудь сервиса через cdn, то есть используя специальную ссылку. Одним из таких сервисов является Google Fonts (https://fonts.google.com/) данный сервис предлагает нам большое количество разных шрифтов, их настройку и удобный интерфейс. Подробно останавливаться на этом сервисе я не буду, скажу что в ближайшем времени запишу видеообзор по данному сервису. Здесь нам понадобится только взять следующий код и вставить в файл CSS:

@import url('https://fonts.googleapis.com/css?family=Pacifico');

здесь я с google fonts выбрал шрифт Pacifico вставил его в начало css.

Теперь остается только назначить элементу шрифт:

 @import url('https://fonts.googleapis.com/css?family=Pacifico'); p 
Подключение шрифтов с помощью CSS
 

наш новый шрифт Pacifico успешно применился к элементу p, строчку font-family: ‘Pacifico’, cursive; мы также можем взять с сервиса.

C этим я думаю все понятно. Бывают ситуации когда мы ищем определенный шрифт, а на сервисах типа google fonts его нет или его необходимо купить чтобы пользоваться. Следовательно в таких ситуациях мы можем найти этот шрифт в интернете, причем для корректной поддержки в современных браузерах нам понадобятся пять форматов шрифта(eot, otf, svg, ttf, woff):

здесь у нас указаны четыре формата шрифта ProximaNova. Вы можете в принципе найти один из форматов шрифта и воспользуясь специальными сервисами типа(https://www.web-font-generator.com/) сгенирировать все недостающие форматы.

После того как у нас есть пять файлов шрифта с расширением (eot, otf, svg, ttf, woff) мы их должны подключить через CSS, делается это следующим образом:

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

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

font-weight — жирность шрифта(bold,300,400 и т. д. )

font-style — стили шрифта(italic, normal)

В нашем случае свойства font-weight и font-style работать не будут, так как мы скачали шрифт с параметром regular, то есть с постоянными параметрами(font-weight:400 и font-style: normal), поэтому их смело можно убрать.

В итоге весь наш код будет выглядеть следующим образом:

 @font-face < src: url('font/ProximaNova-Regular.eot?#iefix') format('embedded-opentype'), url('font/ProximaNova-Regular.woff') format('woff'), url('font/ProximaNova-Regular.ttf') format('truetype'), url('font/ProximaNova-Regular.svg#ProximaNova-Regular-Regular') format('svg'); font-family: 'ProximaNova'; >p 
Подключение шрифтов с помощью CSS
 

как видите здесь ничего сложного нет.

На этом дорогие друзья данная статья подошла к концу. Надеюсь вам удалось узнать что то новое.

Я желаю вам успехов и удачи! Пока!

Оцените статью:

Статьи

Комментарии

Внимание. Комментарий теперь перед публикацией проходит модерацию

Все комментарии отправлены на модерацию

Запись экрана

Данное расширение позволяет записывать экран и выводит видео в формате webm

Добавить приложение на рабочий стол

Источник