Как подключить otf шрифт в css

Как подключить otf шрифт в css

• Главная /
• CSS /
• CSS шрифты

CSS шрифты

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

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

здесь я с google fonts выбрал шрифт Pacifico вставил его в начало 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), поэтому их смело можно убрать.

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

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

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

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

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

Статьи

Комментарии

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

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

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

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

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

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

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

• Нет названия шрифта в свойстве 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» в разных начертаниях:

Pseudo-class и pseudo-element — что это?

В CSS существует два типа псевдо-сущностей: псевдо-классы ( ) и псевдо-элементы ( ). В спецификации CSS2.1 имеются следующие псевдо-классы и псевдо-элементы ( ):

Псевдо-классы ( ):

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

Псевдо-элементы ( ):

Псевдо-элементы, существующие в спецификации CSS2.1:

Так в чем же разница между псевдо-классом ( ) и псевдо-элементом ( )? Все различие заключается в способе, которым эти две псевдо-сущности осуществляют воздействие на HTML-документ.

Псевдо-классы ( ) ведут себя так, как если бы они добавлялись в виде обычных классов элементам HTML-страницы при выполнении определенных событий. Псевдо-элементы ( ) ведут себя так, как если бы они были обычными элементами HTML-страницы, но добавляемыми на нее при выполнении определенных событий.

Прим. переводчика: заметили одну особенность? Обе псевдо-сущности появляются на HTML-странице только при одном условии — выполнении какого-то (не важно, какого) события. Просто одна сущность появляется на странице в виде класса ( ), а вторая в виде элемента ( ). Каким образом появляются? Только одним способом — браузер сам создает (генерирует) псевдо-сущность при выполнении указанного события. Поэтому псевдо-сущности иногда называют генерируемым содержимым. Название “псевдо” в точности говорит само за себя — “как-будто”. То есть — “как-будто класс”, “как-будто элемент”. Название дано не случайно — в исходном коде HTML-страницы не существуют таких классов или элементов; но они появляются (генерируются) там с помощью браузера при определенном событии.

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

Такое впечатление, что внутри HTML-разметки и CSS-таблицы произошли следующие изменения:

Выглядит это так, словно в действительно все так (как создается впечатление) и происходит внутри браузера, не правда ли? Кто знает? Все, что вы знаете, что это работает так, как будто на самом деле так и выглядит. Имя всему этому “псевдо-элемент”.

Аналогично, псевдо-класс работает так, если обычный класс добавляется к элементам внутри HTML-документа.

Например, представим себе, что браузер добавляет класс к каждому элементу , который является первым ребенком своего родителя . Тогда эти элеиенты можно оформить в виде следующего CSS-правила:

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

Вы могли уже догадаться относительно использования в псевдо-элементах двойного двоеточия. Такой синтаксис появился уже позже спецификации CSS2.1 (в спецификации CSS3).

Ни у одного браузера нет строго условия использования двойного двоеточия в псевдо-элементах: одинарное двоеточие прекрасно понимается всеми браузерами.

CSS3 псевдо-классы (pseudo-class):

Спецификация CSS3 добавляет еще несколько псевдо-классов ( ), большинство из которых не имеет всеобщей поддержки в браузерах (на момент написания статьи):

Автор статьи: Eric Meyer — “Smashing CSS Professional Techniques for Modern Layout”

Кратко о :first-of-type, :nth-of-type и :not

Псевдоэлементы и

Псевдоэлемент служит для выборки дочернего элемента определенного типа.

Можно сказать, что псевдоэлемент является частным случаем псевдоэлемента . Если псевдоэлемент выполняет выборку первого дочернего элемента вне зависимости от его типа, то псевдоэлемент осуществляет выборку первого дочернего элемента только указанного типа (если этот элемент отвечает заданному условию — типу элемента).

Аналогично работает псевдоэлемент , только применяется к последнему дочернему элементу определенного типа. Более общим случаем является псевдоэлемент .

Псевдоэлементы , , НЕ ПОДДЕРЖИВАЮТСЯ IE8.

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

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

Рабочий пример приведен ниже. Два одинаковых списка. К первому применен псевдоэлемент , ко второму — псевдоэлемент .

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

Во втором случае к списку применен псевдоэлемент и в этом случае был отобран первый элемент указанного списка — ссылка ! А то, что этот элемент является ссылкой, а не параграфом , роли не играет — тип элемента не был указан:

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

Псевдоэлемент

Псевдоэлемент является частным случаем псевдоэлемента . В случае с выборка элементов производится не только по порядковому номеру, но и по типу элемента.

Например, и делает выборку четных и нечетных порядковых номеров только элементов .

Отбираются все дочерние по отношению к элементы типа , нечетные по порядковому номеру. И применяются к нему правила — смещение влево, и тень справа:

Отбираются все дочерние по отношению к элементы типа , четные по порядковому номеру. И применяются к нему правила — смещение право, и тень слева:

Псевдокласс :not

Псевдокласс (псевдокласс отрицания) — выбрать все элементы , у которых НЕТ класса и применить к ним следующие свойства: цвет и тень. Другими словами, выборка элементов с помощью псевдокласса производится от обратного — “выбрать все элементы, которые НЕ ОТВЕЧАЮТ следующему условию.”

Этот псевдокласс является антагонистом обычного условия — “если удовлетворяет условию, то примени такое-то свойство”:

Как правильно читать псевдо-элемент nth-child

Псевдо-элемент полезен и удобен в применении.

Единственный момент, который мне всегда давался с трудом (а потом быстро забывался) — это запомнить тот алгоритм, по которому данный псевдо-элемент производил свои вычисления.

С ключевыми словами все более или менее ясно и просто — их всего два, одно отвечает за счет четных чисел, другое — за счет нечетных чисел. Нумерация в списках начинается с 1, а не с нуля. Поэтому при выборке с помощью ключевого слова — выбираются все нечетные позиции ( ). С помощью ключевого слова — выбираются четные позиции ( ).

А вот с общей формулой примерного вида было несколько сложнее. Пока я в “Большой книге CSS3” не нашел простого и краткого объяснения, как “читать” это выражение.

Все просто на самом деле. Допустим, у нас есть такое выражение:

… здесь мы говорим браузеру — применить цвет и убрать подчеркивание к тексту каждого второго ( ) элемента , начиная с третьего ( ).

• — выбрать каждый третий элемент, начиная со второго по порядку;
• — выбрать каждый пятый элемент, начиная с третьего элемента;
• — выбрать каждый четвертый элемент, начиная со второго.

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

Как уже можно было догадаться, это всего лишь счетчик. Это объяснение выражения было “подсмотрено” мною на CSS-Tricks (How nth-child Works).

Буква в этом выражении — счетчик, начинающийся с . То есть, если взять первое выражение — , то вычисление внутри него будет производиться следующим образом:

То есть, как и говорилось выше — каждый третий элемент, начиная со второго. Совершенно ничего сложного, как видим. Простая математика и запоминать ничего не нужно. Главное — понять алгоритм вычисления в этом выражении.

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

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

Выжимка из замечательной книги “Большая книга CSS3 3-е издание” Дэвида Макфарланда о веб-шрифтах и способе их подключения с помощью директивы .

Узнал об этой теме массу нового для себя. В частности, два способа подключения шрифтов, особенность работы с сервисом 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, в который помещены шрифты, запрещенные по лицензии для использования в Веб. Другими словам, если “подсунуть” этому генератору лицензионный шрифт, приобретенный пиратским способом, то он откажется от генерации последнего.

Генератор Generator — не единственный в Веб сервис подобного рода. Существуют подобные ему генераторы, которые, в тому же, обладают “неразборчивостью” по отношению к лицензии конвертируемого шрифта.

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

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

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

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

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

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

Виды шрифтов

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

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

Когда браузеру указывается, какое начертание применить, он просто берет шрифт с указанным начертанием и отображает его. К примеру, шрифт Arial имеет четыре вида начертания. Если указывается, что нужно полужирное начертание, то браузер берет полужирное начертание Arial. Сам браузер преобразовать одно начертание в другое не может ни в коей мере. Он может выполнить только одну вещь — попытаться сделать и обычного начертания “курсивное”. Команда, говорящая браузеру выполнить такую задачу, имеет название . В этом случае браузер просто тупо выполняет наклон всех букв шрифта на 45 градусов, и все. Получившийся результат может быть просто ужасным, поэтому такая команда используется очень редко.

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

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

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

Расскажу, как я понимаю данные CSS-правила. Директива является своего рода функцией наподобие функции в JavaScript (а может это и есть функция на самом деле, уж больно похожа по своему функционалу?). Эта функция (я буду называть так здесь эту директиву) объявляет имя переменной правилом . Эта переменная является массивом, который заполняется значениями с помощью последующих правил:

• — местоположение шрифта;
• — загрузить шрифт указанной жирности;
• — загрузить шрифт указанного стиля.

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

И затем HTML-тегами или указать, какое начертание шрифта применить к указанным элементам:

Браузер “вытащит” из массива PTSans шрифт нужного начертания (bold или italic или bold italic) и применит его к указанным элементам страницы.

Преимуществом данного способа подключения веб-шрифта является его универсальность. Достаточно один раз объявить шрифт с помощью директивы и правила:

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

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

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

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

Выходом из положения будет применение различных имен шрифта в директиве . Пример варианта подключения веб-шрифта, понятного для IE8, показан ниже:

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

Оцените этого CSS -“крокодила” ниже. Какой он громоздкий и неуклюжий! А если учесть, что на HTML-странице нужно будет применить шрифт PTSans не только к элементу p, а еще к заголовкам , , ссылке ? Насколько же “раздуются” таблицы стилей в этом случае! А если вдруг (не дай Бог!) придется вносить изменения в такой код?

Применять или не применять второй способ подключения веб-шрифтов — это вопрос того, насколько необходима поддержка IE8 для конкретного сайта. Следует учесть, что доля IE8 падает и будет продолжать падать.

Шрифты Google Fonts

Чтобы не заморачиваться с поиском шрифта, скачиванием его в формате TTF или OTF, конвертации на генераторе типа FontSquirrel Generator, подключения полученных CSS-стилей в проект с помощью многочисленных директив , можно воспользоваться сервисом Google Fonts. Преимущество этого способа заключается в простоте способа и его надежности — достаточно получить на сервере Google одну строку ссылки и поместить ее в свой проект.

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

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

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

Третий способ с помощью JavaScript кроме сложности, никаких других преимуществ перед двумя другими не имеет.

В Google плотность шрифта обозначается не с помощью ключевых слов , или , а в числовой шкале — 100 до 900. Значение 400 соответствует , 700 — .

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

На этом выжимка по веб-шрифтам заканчивается.

Отрицательный margin в нормальном потоке

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

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

Решения такого вопроса два.

Первый способ — это воспользоваться смежными селекторами.

Второй способ, представленный на рисунке ниже, это применить отрицательный для :

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

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

Такой прием полезен на практике в случае, когда необходимо расположить часть контента “на одной линии”. Почему слово на одной линии заключено в кавычки — потому-что контент только визуально располагается на одной линии.

Предположим, у нас есть список (HTML-разметка):

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

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

Но можно решить такую задачу другим способом:

В этом примере отрицательный величиной в “поднимает” элемент вверх ровно на высоту строки, установленную нами ранее в правиле .

Прим. переводчика: очень понравилось, о таком способе решения даже не подозревал!

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

HTML-разметка такого заголовка будет следующей:

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

HTML-разметка, в которой добавлен еще один элемент — :

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

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

Автор статьи: Eric Meyer — “Smashing CSS Professional Techniques for Modern Layout”

Using .otf fonts on web browsers

Is there a way to embed the fonts and get them working on all browsers?

If not, what other alternatives do I have ?

2 Answers 2

You can implement your OTF font using @font-face like:

// Edit: OTF now works in most browsers, see comments

However if you want to support a wide variety of browsers i would recommend you to switch to WOFF and TTF font types. WOFF type is implemented by every major desktop browser, while the TTF type is a fallback for older Safari, Android and iOS browsers. If your font is a free font, you could convert your font using for example a transfonter.

If you want to support nearly every browser that is still out there (not necessary anymore IMHO), you should add some more font-types like:

You can read more about why all these types are implemented and their hacks here. To get a detailed view of which file-types are supported by which browsers, see: