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

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

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

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

Ответы

Ответ 1

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

Да, вы можете base64-кодировать шрифт или шрифты, как показано в этой статье от Стивена Скаффа, и перетаскивать их в блок 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, поэтому вам, вероятно, следует использовать это и только это в обозримом будущем. Кроме того, этот метод улучшит показатели скорости вашей страницы, но в целом снизит производительность (даже при загрузке первой страницы), если только вы не используете только базовые 64-кодированные ресурсы критической страницы (например, глифы шрифта, показанного над сгибом) и асинхронно загружаете остальное.

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

Ответ 2

Вы не можете включить правило @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>

Ответ 3

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

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

Ответ 4

Если вы используете @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 здесь.