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

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

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

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

TrueType Fonts (TTF)

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

2

OpenType Fonts (OTF)

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

3

The Web Open Font Format (WOFF)

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

4

SVG Fonts/Shapes

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

5

Embedded OpenType Fonts (EOT)

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

В следующем коде показан пример кода шрифта:

<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 -

Sr. No. Значение и описание
1

font-family

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

2

src

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

3

font-stretch

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

4

font-style

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

5

font-weight

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