15 шрифтов для печати, сайтов, логотипов и приложений
Содержание:
- Самые рекомендуемые Google веб-шрифты
- Как использовать веб-шрифты
- Сервисы встраивания веб-шрифтов
- Встраивание шрифтов с использованием правила @font-face
- Заметки
- Скачать Odin для Samsung
- ТОП-10 кириллических шрифтов Google fonts
- Различия между семействами шрифтов
- 10 Best Web Safe Fonts that Work with HTML & CSS
- Как делать скриншоты с iPhone, iPad, Apple Watch, Apple TV и Mac
- Имитация кисти
- Different Font Formats
- Настройка шрифтов для сайта в зависимости от тональности
- Подключение своих шрифтов только для современных браузеров.
- Как сделать визитку в Word
- CSS Font Descriptors
- Веб-шрифты
Самые рекомендуемые Google веб-шрифты
Здесь вы найдете подборку шрифтов, которые оказались в этом списке из-за их эстетического аспекта, но, прежде всего, функциональности, в том числе семейства с множеством стилей и весов.
Мы выделили шрифты, оптимизированные для интерфейсов, и другие, которые или удобны для чтения на мобильных устройствах, а также разборчивы на любом устройстве, будь то смартфон, стационарный компьютер или планшет.
- Alegreya
- B612
- Muli
- Titillium Web
- Varela
- Vollkorn
- IBM Plex
- Crimson Text
- Cairo
- BioRhyme
- Karla
- Lora
- Frank Ruhl Libre
- Playfair Display
- Archivo
- Spectral
- Fjalla One
- Roboto
- Montserrat
- Rubik
- Source Sans
- Cardo
- Cormorant
- Work Sans
- Rakkas
- Concert One
- Yatra One
- Arvo
- Lato
- Abril FatFace
- Ubuntu
- PT Serif
- Old Standard TT
- Oswald
Как использовать веб-шрифты
На данный момент большинство дизайнеров знают, как пользоваться веб-шрифтами, но, если вы не уверены, вот два основных способа. Первый —использовать библиотеки веб-шрифтов, такие как Google Fonts, Webtype, Fonts.com или Typekit и загружать шрифт с их серверов, как вы увидите в этом примере:
Второй — разместить шрифт на своем сервере и использовать правило @font-face в таблице стилей, как показано здесь:
Сервисы встраивания веб-шрифтов
Google Web Fonts (GWF) или Typekit — это сервисы которые позволяют использовать шрифты, размещенные на их серверах. GWF бесплатен, не требует наличия учетной записи и не ограничивает трафик или домены. Typekit же устанавливает стоимость услуги в зависимости от количества доменов, на которых используется шрифт, или от ежемесячного трафика сайта. Одной из наиболее ценных характеристик GWF является возможность загрузки версии шрифтов для стационарных компьютеров для использования на этапе разработки проекта.
Реализация
Это действительно быстро и просто:
1. Выберите шрифт. Вы можете добавить его в свою коллекцию или использовать “quick-use” для генерации кода и опций для этого шрифта.
2. Скопируйте и вставьте сгенерированный код в <Head>
<head> <link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Tangerine"> </head>
3. Шрифт теперь доступен в вашем коде CSS
body { font-family: 'Tangerine', serif; font-size: 48px; }
Здесь вы можете обратиться к расширенному руководству по стилям, подмножествам сценариев и использованию нескольких шрифтов.
Встраивание шрифтов с использованием правила @font-face
Шрифты размещаются на сервере пользователя независимо от внешних сервисов. @font-face — это устаревшее правило CSS2, которое было повторно введено в спецификации CSS3 и поддерживается почти всеми современными браузерами. Веб-шрифт — это настраиваемый шрифт, который поддерживается различными браузерами и доступен в таких форматах, как TTF, WOFF, EOT и SVG.
@font-face { font-family: 'ChunkFiveRegular'; src: url('Chunkfive-webfont.eot'); src: url('Chunkfive-webfont.eot?#iefix') format('embedded-opentype'), url('Chunkfive-webfont.woff') format('woff'), url('Chunkfive-webfont.ttf') format('truetype'), url('Chunkfive-webfont.svg#ChunkFiveRegular') format('svg'); font-weight: normal; font-style: normal; }
Этот материал переведен на русский язык редакцией Deadsign, официального партнёра Awwwards в России.
Заметки
Скачать Odin для Samsung
Все доступные для скачивания версии Odin:
Odin для старых моделей до 2011 года (рекомендуется)
- Odin v1.30
- Odin v1.52
- Odin v1.61
- Odin v1.70
- Odin v1.82
- Odin v1.83
- Odin v1.84
- Odin v1.85
Для моделей до 2014 года (рекомендуется)
- Odin v1.86
- Odin v1.87
- Odin v2.10
- Odin v3.04
- Odin v3.06
- Odin v3.07
Для моделей с 2014 года и новее (рекомендуется)
- Odin v3.09
- Odin v3.10.0
- Odin v3.10.5
- Odin v3.10.6
- Odin v3.10.7
- Odin v3.10.7.1
- Odin v3.11.1
- Odin v3.11.2
Odin для моделей Samsung с 2017 года и новее (рекомендуется)
- Odin v3.12.3
- Odin3 v3.12.4
- Odin3 v3.12.5
- Odin3 v3.12.7
- Odin3 v3.12.10
- Odin3 v3.13.1 (поддержка прошивок .lz4)
- Odin3 v3.13.3 (поддержка прошивок .lz4 и Android 9.0 PIE)
- Odin3 v3.14.1 (Android 10)
- Odin3 v3.14.4
ТОП-10 кириллических шрифтов Google fonts
1. Open Sans — безусловный лидер рейтинга. Содержит полный набор 897 символов. Имеет отличные характеристики, разборчив. Оптимизирован под различные устройства. Его дизайн практически идентичен Droid Sans, за исключением более широких символов и наличием курсива. В то время как Droid Sans в основном используется в пользовательских интерфейсов некоторых Android устройствах.
2. Roboto — этот чистый шрифт мир впервые увидел с появлением операционной системы Android Ice Cream Sandwich. Семейство данного шрифта включает регулярные и курсивные стили, тонкий, легкий, регулярный и суженный ширины (condensed). По своей структуре явно напоминает не менее известный шрифт Helvetica. Начиная с 15 мая 2013 г. данный шрифт компания Google начал интенсивно использовать в своих популярных продуктах таких как: Google+, Google Play, Google Maps.
3. PT Sans — содержит в себе четыре варианта стиля, что тем не менее не мешает ему занимать лидирующие позиции по популярности. Толчок к развитию данного шрифта дала Роспечать, которая поставила цель создать шрифт поддерживающий все различные варианты кириллицы, используемой на языках национальных меньшинств России. Шрифт PT Sans включает в себе символ российского рубля.
4. Ubuntu — этот шрифт мир впервые увидел в составе операционной системы Ubuntu ее версии 10.10. Доступен в четырех версиях: обычный, курсив, полужирный, полужирный курсив на английском языке и на кириллице. Начиная с 26 апреля 2011 г. он включен для использования в сервисе Google Docs.
5. Arimo — данный шрифт вошел в состав Chrome OS. Еще одна допустимая альтернатива Helvetica.
6. Noto Sans
7. Play
8. Cuprum — универсальный шрифт. Представляет собой зауженный гротеск. Доступен в четырех вариантах начертаний.
9. Philosopher
10. Istok Web
Различия между семействами шрифтов
Существуют несколько различных семейств шрифтов, которые используются в разработке сайтов.
Serif – шрифты с засечками (с хвостиками на концах строки, образующей букву). Одни из самых старых и классических семейств шрифтов. Именно такие шрифты использовали люди при создании первых дизайнов в мире. Шрифт с засечками хорошо читабелен на любом расстоянии, его можно использовать как в заголовках, так и для основного текста.
Black lettering – жесткий, тяжелый, трудночитаемый готический шрифт. Является древнейшим семейством шрифтов, именно с использованием таких шрифтов человечество писало свои первые книги. В настоящее время рекомендуется использовать его только в заголовках.
Slab-serif – семейство шрифтов с толстыми засечками. Являются современной версией шрифтов с засечками. Обычно такие шрифты ассоциируются с модой, молодежью, «хипстерами». Рекомендуется также использовать их только для заголовков или для выделения цитат в тексте.
Sans-serif – современный шрифт без засечек. Шрифты этого семейства могут быть различными: более округлыми, квадратными, легкими или более толстыми. В данном семействе достаточно много стилей шрифтов, поэтому разобрать их стоит отдельно.
Геометрический шрифт без засечек является достаточно читабельным и может использоваться как в заголовках, так и для основного текста. Однако нужно учитывать, что чтение длинных текстов, написанных шрифтом, составленным из символов у которых нет разницы в высоте, может вызывать дискомфорт и быстрое утомление.
Очень популярный шрифт без засечек – Helvetica. Причина его популярности – четкое сохранение разницы в высоте символов. Закруглённые символы шрифта делают чтение больших текстов комфортным и простым. Данный шрифт используется как в заголовках, так и для сносок, цитат и главного текста. Шрифт хорошо читается в любом размере.
Handwriting (рукописный) – семейство шрифтов, имитирующих рукописное написание. Отличаются мягкими, плавными линиями и считаются неформальными. Такие шрифты менее читабельны, поэтому рекомендуется использовать только для крупных коротких заголовков или цитат. Также нужно помнить, что использование таких шрифтов в официальных документах – дурной тон.
Display (декоративный) – шрифты без определенных принципов дизайна и построения. Такие шрифты используются в логотипах компаний, заголовках на сайтах. Существует их огромное количество, разнообразных форм и начертаний. Длинные тексты такими шрифтами не пишут.
10 Best Web Safe Fonts that Work with HTML & CSS
This web
safe font list includes the most popular fonts and the best widely used
typography fonts. While some are free, please purchase genuine
authorized fonts.
1. Arial
The
Arial font is one of the most widely used designs in the last 30 years.
Designed by Monotype Imaging designers Robin Nicholas and Patricia
Saunders in 1982 for use with early IBM laser printers. Since Arial is
easy to read in both large and small sizes and in a variety of
applications, Arial has been the main screen font for decades.
Use for: advertising, book design, office communications, posters, large print ads
2. Calibri
The
release of Calibri by Microsoft and its implementation as the default
font in many applications is widely recognized. It is a humanistic sans
serif font known for its warm and rounded lines. Calibri’s compact
layout gives it the flexibility to work in a wide range of text sizes.
Use for: digital media
3. Times NewRoman
One
of the most common font types is Times New Roman. This serif font comes
from the British «Times». In 1929, font expert Stanley Morison
criticized the magazine’s fonts as difficult to read and ugly. The
magazine’s people accepted his criticism and asked him to design a new
font suitable for magazine reading. So, Morison collaborated with Victor
Lardent from the magazine to design the now famous Times New Roman.
Use for: books, periodicals, annual reports, brochures, newspapers
4. Helvetica
Helvetica
is one of the most widely used sans serif fonts, created in 1957 by Max
Miedinger and Eduard Hoffman. The neutral design of this font makes it
quite usable in a variety of applications. Due to its usability,
Helvetica is ubiquitous and has always been a popular choice for
corporate identity. In addition, Helvetica is widely used by the US
government, and the Helvetica font is used on the US tax bill.
Use for: brand trademark
5. Tahom
Tahoma
is a very common sans serif font. The font structure is similar to
Verdana, its character spacing is small, and its support for Unicode
word sets is large. It was launched by Microsoft in 1999. Many people
who don’t like the Arial font often use Tahoma instead. Specifically,
Arial is criticized for certain style issues, such as uppercase «I» and
lowercase «l» being difficult to distinguish
Use for: screen dialogs, menus
6. Georgia
Georgia
is a serif font, designed by the famous font designer Matthew Carter
for Microsoft in 1993. One of its strengths is good readability even in
small font size.
Use for: e-book, mobile phone, computer webpage
7. Verdana
Verdana
is a sans serif font designed by Matthew Carter for Microsoft. Like the
font Frutiger, the Verdana design concept is adapted to the
low-resolution computer screens of that time. The breadth and width of
Verdana characters are key to the legibility of this font on the screen.
Although the Verdana font family is small in size, it has a higher
resolution and as such is one of the most popular fonts.
In 2010,
IKEA abandoned Futura, which had been in use for many years, and turned
to Verdana. According to IKEA, the reason for this change was to ensure
that the font could be adapted to texts of various countries (previous
IKEA fonts were not compatible with Asian characters), thus ensuring the
consistency of the IKEA design. Thus, Verdana has a wide international
appeal and usability.
Use for: e-book, mobile phone, computer webpage
8. Optima
The
Optima font is a clear and precise font designed by the famous designer
Hermann Zapf. Optima is inspired by classical Roman inscriptions, with
slightly different curves and lines, leaving an elegant and clear
impression. Therefore, Optima is often used to convey classic ideals, as
well as current trends. For example, Estée Lauder uses it as an
official typeface design.
Use for: poster design, bookbinding, album cover, product packaging design
9. Palatino
The
Palatino font series is said to be one of the ten most used fonts in
the world. Palatino’s design uses classic serif fonts in a strong, open
style that is easy to read and very attractive. Its popularity has
spawned many imitators.
Use for: newspapers and magazines, advertising, e-books, mobile apps, computer pages
10. Candara
Candara is a sans serif font developed byFont Designer Gary Munch for Microsoft and shipped with Windows Vista. ——Wikipedia
Как делать скриншоты с iPhone, iPad, Apple Watch, Apple TV и Mac
Имитация кисти
Такие шрифты будут очень кстати при оформлении различных приглашений, брендировании цветочных магазинов. Мы подобрали различные техники на любой вкус. К сожалению, рукописных шрифтов поддерживающих русский алфавит не так много.
Brittania
Изящный шрифт с завивающимися росчерками. Свадебное приглашение с использованием такого шрифта будет выглядеть весьма привлекательно. Дизайнер шрифта Barmawy Muchtar.
Скачать шрифт Brittania
Bafora
Это размашистое начертание позволит создать имитацию кисти максимально реалистично. Дизайнер действительно постарался над детализацией. Не рекомендуем использовать на мелких носителях т.к. детали сольются и эффект выйдет уже не тот. Творец компания Craft Supply.
Скачать шрифт Bafora
Cratti Script
Местами не разборчивый, но весьма неплохой шрифт. Подойдет для айдентики любых направлений. Разработал человек под псевдонимом Fadhil.
Скачать шрифт Cratti Script
Granotta Script
Граната в шрифтовом дизайне. Хорошо вымеренные буквы довольно удачно соединены между собой и не сливаются в кашу как некоторые собратья. Изготовитель гарнитуры Gameboth Studio.
Скачать шрифт Granotta
Kallisa
Свежая и выдержанная работа художника. Отличная находка для любителей использовать каллиграфический шрифт в фирменном стиле. Поблагодарим разработчика Blankids Studio.
Скачать шрифт Kallisa
Rommantis
Отличный, свободный стиль письма. Можно смело использовать для создания леттеринга. Привлекательность этого шрифта вдохновляет взять перо и вспомнить художественную школу. Творение принадлежит некоему Thirtypath.
Скачать шрифт Rommantis
Slopes Brush
Для тех, кто ценит не количество вензелей и росчерков, а читаемость, удобство и масштабируемость. Да, при уменьшении буквы этого шрифта будут также различимы, как и на расстоянии. Именно поэтому похожие шрифты применяются в разработке меню и фасадов в закусочных, барах и булочных. Очень жаль, что человек с именем Boris Garic, не предусмотрел кириллицу в таком красивом и полезном шрифте.
Скачать шрифт Slopes Brush
Mistral
А вот и платный аналог. Этот новый шрифт заслуживает внимания уже потому, что он один из немногих рукописных шрифтов, который поддерживает русский язык. Mistral легко может стать частью стильного брендинга. Но есть и ограничения. Не рекомендуем использовать этот шрифт для набора большого объема текста. Дизайнер Roman Poliishchuk.
Купить шрифт Mistral
Different Font Formats
TrueType Fonts (TTF)
TrueType is a font standard developed in the late 1980s, by Apple and Microsoft. TrueType is the most common font format for both the Mac OS and Microsoft
Windows operating systems.
OpenType Fonts (OTF)
OpenType is a format for scalable computer fonts. It was built on TrueType,
and is a registered trademark of
Microsoft. OpenType fonts are used commonly today on the major
computer platforms.
The Web Open Font Format (WOFF)
WOFF is a font format for use in web pages. It was developed in 2009, and is
now a W3C Recommendation. WOFF is essentially OpenType or TrueType with
compression and additional metadata. The goal is to support font distribution
from a server to a client over a network with bandwidth constraints.
The Web Open Font Format (WOFF 2.0)
TrueType/OpenType font that provides better compression than WOFF 1.0.
SVG Fonts/Shapes
SVG fonts allow SVG to be used as glyphs when displaying text. The SVG 1.1
specification define a font module that allows the creation of fonts within an
SVG document. You can also apply CSS to SVG documents, and the @font-face rule
can be applied to text in SVG documents.
Embedded OpenType Fonts (EOT)
EOT fonts are a compact form of OpenType fonts designed by Microsoft for use
as embedded fonts on web pages.
Настройка шрифтов для сайта в зависимости от тональности
Когда вы только приступаете к дизайну сайта, подумайте, подойдет ли вам шрифт, который установлен по умолчанию, потому что шрифт должен соответствовать тону вашего проекта. Сайт детского спортивного лагеря и сайт архитектурной студии — это проекты, которые имеют разную тональность. Выразить ее можно с помощью насыщенности шрифта.
Мы рассмотрим 4 варианта сочетаний разной насыщенности шрифта в заголовках и в тексте. Они помогут выразить тональность сайта, чтобы он выглядел гармонично и у вас получится хороший проект.
1. Полужирный заголовок и нормальный текст
Это самое базовое сочетание, которое будет хорошо работать в большинстве случаев. Используйте, если ваша задача сделать просто хороший сайт без ярко выраженного акцента.
Для каких сайтов подойдет: для любых.
Пример: Страница вакансии. В примере используются шрифты: Open Sans (для заголовков) и Roboto (для текста).
2. Жирный заголовок и нормальный текст
Тоже довольно распространенное, устойчивое сочетание. Рекомендуем его использовать, если вы хотите подчеркнуть, что ваш проект — это драйв и энергия.
Для каких сайтов подойдет: бар, коворкинг, анонс концерта, спортивные соревнования, промостраница тура и т.д.
Пример: Сайт коворкинга. В примере используются шрифты: Ubuntu (для заголовков) и PT Sans (для текста).
3. Жирный заголовок и тонкий текст
Более необычное сочетание, выглядит эффектно за счет контраста. Уместно в случае, когда вам нужно сочетать и драйв, и стиль
Пример: Страница дизайн-студии. В примере используются шрифты: Noto Sans (для заголовков) и Open Sans (для текста).
4. Тонкий заголовок и тонкий текст
Сочетание для проектов, связанных с высокими технологиями, чем-то прогрессивным и современным. Либо эстетичным и стильным. Особенно хорошо сработает, если у вас много белого пространства и есть небольшие акценты ярких цветов. И красивые фотографии.
Для каких сайтов подойдет: технологичные устройства, ювелирные украшения, дорогое кафе или ресторан, студия красоты.
Пример: Лэндинг мобильного приложения для обработки фотографий.
Подключение своих шрифтов только для современных браузеров.
Если Вас волнует отображение сайта только в современных браузерах, то в таком случае можете подключать лишь два формата, а именно формат woff и ttf.
Формат woff самый легкий, потому что он сжатый. Весит он всего лишь 28.1 kb и это главный плюс данного формата. Остальные шрифты весят почти вдвое больше, eot весит 44kb, а ttf 43.9kb.
Но, к сожалению его, не понимают браузеры Opera, Safari и Android. Поэтому нужно подключить и универсальный формат ttf которого по сравнению с woff понимают все браузеры. Его поддерживает даже браузеры из ОС Android, начиная с версии 2.2.
@font-face{
font-family: OpenSansBold; /* Название шрифта. */
src: url("../fonts/OpenSans/OpenSansBold/OpenSansBold.woff") format("woff"),
url("../fonts/OpenSans/OpenSansBold/OpenSansBold.ttf") format("truetype");
}
Указание формата. Строчка format(«тип формата шрифта»)
Для чего нужно написать декларацию format после каждого подключенного формата шрифта ?
Это нужно для того чтобы браузер не подгружал все шрифты подряд, а только тот шрифт который он понимает. То есть браузер смотрит на формат шрифта которого мы хотим подключить и если он сможет отобразить данный формат, то он его загружает, в противном случае он пропускает его и переходит к следующей строчке url. И так пока он не найдет нужного формата, которого он сможет отобразить без проблем.
Следовательно, благодаря этому свойству , мы увеличиваем скорость загрузки страницы, не загружая лишние файлы. Поэтому, формат шрифта нужно указать обязательно.
Шрифты для браузеров на ОС IOS
Что касается этих браузеров, то они также понимают формат ttf но только начиная с четвертой версии IOS и выше. Для более старых версий нужно подключить шрифт формата SVG.
Отображение страницы сайта после подключения шрифта Open Sans.
Для наглядности, внутри тега body я добавил заголовок h1 с названием шрифта и параграф с текстом. Заголовок h1 выровнял по центру страницы, задав ему в css файл свойство text-align со значением center.
h1{
text-align: center;
}
Все готово. Открываем страницу в браузере и смотрим на результат.
Вид страницы до подключения шрифта:
Вид страницы после подключения шрифта:
Проверка шрифта онлайн, сразу на страницу сайта
Также на сайте fonts4web.ru есть такая возможность как проверка шрифта прямо на Вашем сайте, без его подключения.
И так, заходим на этот сайт, вводим название нашего любимого шрифта, например Open Sans и переходим на детальную страницу данного шрифта.
На этой странице есть синее текстовое поле, куда необходимо ввести URL адрес страницы.
Вот как выглядит данное поле на сайте сейчас:
Вводим адрес страницы, на которой хотим применить данный шрифт и нажимаем на кнопку открыть. В новой вкладке откроется указанная страница, где увидите, что текущий шрифт поменялся на выбранный шрифт. Я ввел название моего сайта sozdatisite.ru.
Смотрим на предварительный результат:
Посмотрели хорошенько и уже можете решить, подключить данный шрифт к сайту или нет.
Пожалуй, это все что я хотел Вам рассказать в этой статье. Теперь Вы знаете, как подключить нестандартные шрифты на Вашем сайте. Также Вы узнали про форматы шрифтов и их поддержки в разных браузерах.
Тогда поделитесь ею с друзьями и подпишитесь на новые интересные статьи.
Поделиться с друзьями:
Подписаться на новые статьи:
Поддержите пожалуйста мой проект!
Добавляйтесь ко мне в друзья в:
-
— ВКонтакте
- — Одноклассниках
Добавляйтесь в мои группы:
- — Группа в ВКонтакте
- — Группа в Facebook
- — Группа в Одноклассниках
Подпишитесь на мои каналы:
- — Мой канал на Youtube
- — Мой канал на Google+
Автор статьи: Мунтян Сергей
Копирование материалов с сайта sozdatisite.ru ЗАПРЕЩЕНО!!!
Дата добавления: 2016-02-26 18:33:50
Как сделать визитку в Word
CSS Font Descriptors
The following table lists all the font descriptors that can be defined inside the rule:
| Descriptor | Values | Description |
|---|---|---|
| font-family | name | Required. Defines a name for the font |
| src | URL | Required. Defines the URL of the font file |
| font-stretch | normal condensed ultra-condensed extra-condensed semi-condensed expanded semi-expanded extra-expanded ultra-expanded |
Optional. Defines how the font should be stretched. Default is «normal» |
| font-style | normal italic oblique |
Optional. Defines how the font should be styled. Default is «normal» |
| font-weight | normal bold 100 200 300 400 500 600 700 800 900 |
Optional. Defines the boldness of the font. Default is «normal» |
| unicode-range | unicode-range | Optional. Defines the range of UNICODE characters the font supports. Default is «U+0-10FFFF» |
❮ Previous
Next ❯
Веб-шрифты
Но есть альтернатива, которая работает очень хорошо начиная с 6-ой версии IE. Веб-шрифты — это функция CSS позволяющая вам указывать файлы шрифтов, загружаемые вместе с вашим веб-сайтом по мере доступа к нему, это означает, что любой браузер, поддерживающий веб-шрифты, может иметь в своем распоряжении именно те шрифты, которые вы укажете. Замечательно! Требуемый синтаксис выглядит примерно так:
Во-первых, у вас есть блок в начале CSS, который указывает файл(-ы) шрифтов для загрузки:
@font-face {
font-family: "myFont";
src: url("myFont.woff");
}
Ниже вы можете использовать имя семейства шрифтов, указанное внутри @font-face, чтобы применить свой собственный шрифт ко всему, что вам нравится, как обычно:
html {
font-family: "myFont", "Bitstream Vera Serif", serif;
}
Синтаксис становится немного сложнее, чем этот; мы вдадимся в подробности ниже.
Есть две важные вещи, которые нужно иметь в виду о веб-шрифтах:
- Браузеры поддерживают разные форматы шрифтов, поэтому вам будут нужны несколько форматов шрифтов для приличной кросс-браузерной поддержки. Например, большинство современных браузеров поддерживают WOFF/WOFF2 (Web Open Font Format versions 1 and 2), наиболее эффективный формат, но старые версии IE поддерживают только шрифты EOT (Embedded Open Type) и вам возможно понадобиться включать версию SVG шрифта для поддержки старых версий браузеров iPhone и Android. Ниже мы покажем вам как генерировать требуемый код.
- В основном шрифты не бесплатны для использования. Вы должны платить за них и/или соблюдать другие условия лицензии такие как указание создателя шрифта в коде (или на вашем сайте). Вы не должны красть шрифты и использовать их без должного указания авторства.
Обратите внимание: Веб-шрифты как технология поддерживается в Internet Explorer начиная с 4 версии!
