@font-face - свои шрифты
Позволяет авторам использовать в документе свои собственные шрифты, @font-face позволяет создавать контент, не ограничиваясь так называемыми «веб-безопасными» шрифтами (то есть шрифтами, которые настолько распространены, что их считают универсально доступными).
Возможность указать имя локально установленного шрифта для поиска и использования позволяет настраивать шрифт вне базовых возможностей, в то же время делая это возможным, не полагаясь на подключение к Интернету.
Обычно используется одновременно url () и local (), так что установленная пользователем копия шрифта используется, если она доступна, и прибегает к загрузке копии шрифта, если она не найдена на устройстве пользователя.
Шрифты считываются по порядку сверху вниз:
В примере ниже браузер сначала подключит шрифт SavoyeLetPlain.eot, если этот шрифт не поддерживается тогда следующий:
@font-face {
font-family: 'FontName';
src: url('webfont.eot'); /* IE9+ Compat Modes */
src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('webfont.woff2') format('woff2'), /* Super modern browsers */
url('webfont.woff') format('woff'), /* Modern browsers */
url('webfont.ttf') format('truetype'), /* Safari, Android, iOS */
url('webfont.svg#FontName') format('svg'); /* Legacy iOS */
}
Использование font-face:
<html>
<head>
<title>Web Font Sample</title>
<style type="text/css" media="screen, print">
@font-face {
font-family: "Bitstream Vera Serif Bold";
src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
}
body { font-family: "Bitstream Vera Serif Bold", serif }
</style>
</head>
<body>
This is Bitstream Vera Serif Bold.
</body>
</html>
TTF/OTF (True Type и Open Type Fonts) - эти шрифты имеют широкую поддержку. Разработаны Microsoft совместно с Adobe, с целью применения в различных операционных системах.
WOFF (Web Open Font Format) - сжатая версия шрифтов TTF/OTF. Формат включает в себя метаданные, в которые автор шрифта может добавить информацию об использовании шрифта. WOFF-формат имеет широкую поддержку со стороны браузеров.
WOFF2 (Web Open Font Format 2) - спецификация была разработана, чтобы обеспечить улучшенное сжатие и тем самым снизить использование пропускной способности сети, в то же время, позволяя быстро производить декомпрессию даже на мобильных устройствах.
SVG (Scalable Vector Graphic) – способ создания векторной графики. SVG-формат имеет очень ограниченную поддержку (IOS/Safari). Планируется, что он перестанет использоваться в Chrome.
EOT (Embedded Open Type) – шрифты, которые поддерживаются только в Internet Explorer/Edge (разработаны компанией Microsoft для использования в качестве встроенных шрифтов на веб-страницах).