Учебники

CSS3 — веб-шрифты

Сентябрь 21, 2018

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

Различные форматы веб-шрифтов

Sr.No. Шрифт и описание
1

TrueType Fonts (TTF)

TrueType — это стандартный набросок шрифтов, разработанный Apple и Microsoft в конце 1980-х годов. Он стал наиболее распространенным шрифтом для операционных систем Windows и MAC.

2

OpenType Fonts (OTF)

OpenType — это формат для масштабируемых компьютерных шрифтов, разработанный Microsoft.

3

Веб-формат открытого шрифта (WOFF)

WOFF используется для разработки веб-страницы и разработан в 2009 году. Сейчас он используется по рекомендации W3C.

4

SVG Fonts / Shapes

SVG позволяет использовать шрифты SVG в документации SVG. Мы также можем применить CSS к SVG со свойством font face.

5

Встроенные шрифты OpenType (EOT)

EOT используется для разработки веб-страниц и встроен в веб-страницы, поэтому нет необходимости разрешать сторонние шрифты

TrueType Fonts (TTF)

TrueType — это стандартный набросок шрифтов, разработанный Apple и Microsoft в конце 1980-х годов. Он стал наиболее распространенным шрифтом для операционных систем Windows и MAC.

OpenType Fonts (OTF)

OpenType — это формат для масштабируемых компьютерных шрифтов, разработанный Microsoft.

Веб-формат открытого шрифта (WOFF)

WOFF используется для разработки веб-страницы и разработан в 2009 году. Сейчас он используется по рекомендации W3C.

SVG Fonts / Shapes

SVG позволяет использовать шрифты SVG в документации SVG. Мы также можем применить CSS к SVG со свойством font face.

Встроенные шрифты OpenType (EOT)

EOT используется для разработки веб-страниц и встроен в веб-страницы, поэтому нет необходимости разрешать сторонние шрифты

Следующий код показывает пример кода шрифта лица —

Live Demo

<html>
   <head>
      <style>
         @font-face {
            font-family: myFirstFont;
            src: url(/css/font/SansationLight.woff);
         }
         div {
            font-family: myFirstFont;
         }
      </Style>
   </head>
   
   <body>
      <div>This is the example of font face with CSS3.</div>
      <p><b>Original Text :</b>This is the example of font face with CSS3.</p>
   </body>
</html>

Это даст следующий результат —

Описание шрифтов

Следующий список содержит все описания шрифтов, которые помещены в правило @ font-face —

семейство шрифтов

Используется для определения названия шрифта

ЦСИ

Используется для определения URL

Шрифт растяжения

Используется, чтобы найти, как следует растягивать шрифт

стиль шрифта

Используется для определения стиля шрифтов

начертание шрифта

Используется для определения веса шрифта (жирность)

38
Share: