Использование шрифтов True Type в веб-приложениях

Question

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

Answer 1

HTML5 позволяет использовать TTF шрифты в вашем CSS:

@font-face {
  font-family: 'Tagesschrift';
  src: url('tagesschrift.ttf');
}

Чтобы использовать его:

h1, h2, h3 { font-family: 'Tagesschrift', 'Georgia', serif; }

Проверьте дополнительную информацию в html5rocks .

Answer 2

Вы используете Внедрение шрифта .

Это повлияет на общее время загрузки страницы, так как необходимо загрузить данные шрифта, а также другой контент, стили и т. Д. Однакоон будет кэширован, поэтому влияет только на первый просмотр страницы.

Answer 3

Я хочу обновить принятый ответ в связи со значительным течением времени. Ниже указано, что Font Squirrel выводит при рекомендуемой настройке «Оптимальный». Поддержка .ttf на данный момент больше не важна и должна игнорироваться.

font-family: 'Tagesschrift';
  src: url('tagesschrift.woff2') format('woff2'),
       url('tagesschrift.woff') format('woff');
  font-weight: normal;
  font-style: normal;

Answer 4

Встраивание шрифтов может быть немного сложным из-за проблем совместимости браузера.Например, Safari поддерживает только шрифты SVG.IE поддерживает только .eot, который сначала должен быть конвертирован из .ttf

. Я обнаружил, что самый простой способ использовать пользовательские шрифты - это Google Fonts Помимо бесплатного каталога шрифтов Google на выборЕсть несколько провайдеров, которые предоставляют гораздо более широкий выбор шрифтов бесплатно и для покупки.