😎 » CSS3 » @font-face - свои шрифты
800 0  

@font-face - свои шрифты

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


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

Обычно используется одновременно url () и local (), так что установленная пользователем копия шрифта используется, если она доступна, и прибегает к загрузке копии шрифта, если она не найдена на устройстве пользователя.


what Шрифты считываются по порядку сверху вниз:

В примере ниже браузер сначала подключит шрифт 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 для использования в качестве встроенных шрифтов на веб-страницах).

 

 
 

Залишити свій коментар:

Досвід у веброзробці:

2009
2010
2011
2012
2013
2014
2015
2016
2017
2018
2019
2020
2021
2022
2023
2024
2025
2026
2027
2028
2009
2023