Загрузка внешнего шрифта с помощью встроенного CSS - PullRequest
Новая
       47

Загрузка внешнего шрифта с помощью встроенного CSS

40 голосов
/ 06 января 2012

Можно ли загрузить внешний шрифт через встроенный CSS?

Примечание: я не говорю об использовании внешнего файла CSS с определением @font-face, а скорее о чем-то вроде следующего: 

<h1 style="font-family:myfont;
    src:('http://example.com/font/myfont.tff')">test</h1>

Ответы [ 4 ]

15 голосов
/ 18 апреля 2017

Можно ли загрузить внешний шрифт с помощью встроенного CSS?НЕ с внешним CSS-файлом [....].

Да, вы можете base64-кодировать шрифт или шрифты, как показано в этой статье из Stephen Scaff, и поместить их вблок style на вашей странице, чтобы избежать внешнего запроса.

Возможно также использовать эту технику так, как вы описываете, если используемый вами браузер ее поддерживает. 

<style>
  @font-face {
    font-family: 'PT Sans';
    font-style: normal;
    font-weight: normal;
    src: local('PT Sans'), local('PTSans-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAHowABMAAAAA+OAA) format('woff2');
  }
  @font-face {
    font-family: 'PT Serif';
    font-style: normal;
    font-weight: normal;
    src: local('PT Serif'), local('PTSerif-Regular'),
      url(data:application/font-woff2;charset=utf-8;base64,d09GRgABAAAAAIQYABMAAAAA/MAA) format('woff2');
  }
</style>

Каждый современный браузер поддерживает WOFF2 , поэтому вам, вероятно, следует использовать этот и только этот в обозримом будущем.Кроме того, этот метод улучшит показатели скорости вашей страницы, но снизит производительность в целом (даже при загрузке первой страницы), если только вы не кодируете base64 критически важные ресурсы страницы (например, глифы шрифта, показанного надсверните) и асинхронно загрузите остальное.

В плане производительности лучше всего сейчас использовать сжатие Brotli и передать таблицу стилей веб-шрифта с помощью HTTP/ 2 Server Push .

9 голосов
/ 10 марта 2013

Вы не можете включить правило @font-face в атрибут style (который является «встроенным CSS» в самом узком смысле). Согласно спецификации HTML 4.01, вы не можете вообще включать такое правило в элемент body («встроенный CSS» в более широком смысле, который включает style элементы) . Но на практике это возможно.

На практике, если вы включите элемент style внутри body, он будет обрабатываться браузерами так же, как если бы он находился в синтаксически правильном месте, то есть внутри элемента head. Он даже работает «задом наперед», воздействуя на элементы, появляющиеся перед ним.

Вы даже можете использовать этот подход - который следует использовать, только если вы не можете изменить head - формально правильный согласно HTML5 CR. Он допускает элемент style в начале любого элемента с потоковым содержимым в качестве модели содержимого. Текущие браузеры игнорируют атрибут scoped.

Обновление : следующее больше не имеет значения, поскольку ошибка валидатора была исправлена.

Однако есть ошибка в W3C Markup Validator и validator.nu: они запрещают style в начале body. Чтобы преодолеть эту ошибку и сделать документ в дополнение к действительности, вы можете использовать дополнительный элемент div: 

<body>
<div>
<style scoped>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
2 голосов
/ 06 января 2012

Нет, не то, что я знаю.Вам нужно будет объявить такие вещи в блоке <style> или во внешнем файле CSS.

Хотя, если вы хотите что-то подобное, очень вероятно, что вы делаете это неправильно.

0 голосов
/ 06 января 2012

Если вы используете @ font-face, вы сможете сделать что-то вроде этого:

CSS 

@font-face {
font-family: 'RalewayThin';
src: url('fonts/raleway_thin-webfont.eot');
src: url('fonts/raleway_thin-webfont.eot?#iefix') format('embedded-opentype'),
     url('fonts/raleway_thin-webfont.woff') format('woff'),
     url('fonts/raleway_thin-webfont.ttf') format('truetype'),
     url('fonts/raleway_thin-webfont.svg#RalewayThin') format('svg');
font-weight: normal;
font-style: normal;

}

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

HTML 

<h1 style="font-family:RalewayThin,Helvetica, sans-serif;">

Вы сможете найти бесплатный веб@ font-face шрифты здесь .

...