Можно ли загрузить внешний шрифт через встроенный CSS?
Примечание. Я не говорю об использовании внешнего файла CSS с определением @font-face, а говорю о чем-то вроде следующего:
<h1 style="font-family:myfont;
src:('http://example.com/font/myfont.tff')">test</h1>
Можно ли загрузить внешний шрифт с помощью встроенного 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, поэтому вам, вероятно, следует использовать и только его. на обозримое будущее. Кроме того, этот метод улучшит показатели скорости страницы, но ухудшит производительность в целом (даже при загрузке первой страницы), если только вы не кодируете в base64 только важные ресурсы страницы (например, глифы шрифта, показанного выше). сгиб) и асинхронно загружать остальные.
С точки зрения производительности сейчас лучше всего использовать сжатие Brotli и передать таблицу стилей веб-шрифта с помощью HTTP/2 Server Push.
<h1 style="...">
- person OZZIE; 05.07.2019
<style> где угодно или только в заголовке?
- person stevec; 01.05.2020
Вы не можете включить правило @font-face в атрибут style (который является «встроенным CSS» в самом узком смысле). Согласно спецификации HTML 4.01, вы вообще не можете включать такое правило внутри элемента body («встроенный CSS» в более широком смысле, который включает styleэлементов). Но на практике это возможно.
На практике, если вы включаете элемент style внутрь body, он будет обрабатываться браузерами так же, как если бы он находился в синтаксически правильном месте, то есть внутри элемента head. Он даже работает «наоборот», воздействуя на элементы, появляющиеся перед ним.
Вы даже можете сделать этот подход, который следует использовать только в том случае, если вы не можете изменить head, формально правильным в соответствии с HTML5 CR. Он разрешает элемент style в начале любого элемента с потоковым содержимым в качестве модели содержимого. Текущие браузеры игнорируют атрибут scoped.
Обновление: следующее больше не актуально, так как ошибка валидатора была исправлена.
Однако существует ошибка в валидаторе разметки W3C и в validator.nu. : они запрещают style в начале body. Чтобы преодолеть эту ошибку и сделать ваш документ не только действительным, но и валидным, вы можете использовать дополнительный элемент div:
<body>
<div>
<style>
/* your @font-face and other CSS rules go here */
</style>
<!-- your document body proper goes here -->
</div>
</body>
style, которые можно назвать «встроенными CSS» в более широком смысле, поскольку код CSS непосредственно появляется в документе HTML, а не находится в отдельном документе CSS, на который просто ссылаются в HTML. . Правило HTML 4.01, запрещающее style внутри body, не имеет отдельного места в спецификации, поскольку оно следует из отсутствия элемента style в любой модели контента, кроме элемента head.
- person Jukka K. Korpela; 01.11.2014
<style scoped></style> и <style></style> удалены из веб-дезинфицирующего средства, но я могу поместить что угодно в атрибут style="". Кроме того, будет ли это работать, если я использую атрибут стиля a@importinside?
- person user2284570; 01.11.2014
@import не работает внутри атрибута style. Значение атрибута style может состоять только из объявлений (имя: значение), которые будут применяться к текущему элементу.
- person Jukka K. Korpela; 01.11.2014
Нет, не то, что я знаю. Вам нужно будет объявить такие вещи в блоке <style> или во внешнем файле CSS.
Хотя, если вы хотите что-то подобное, очень вероятно, что вы делаете это неправильно.
Though if you want something like this, it's very probable you're doing it wrong.: Как насчет встраивания шрифта в одну страницу медиавики?
- person user2284570; 01.11.2014
Если вы используете @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 можно найти здесь.
style=;)
- person Madara's Ghost; 06.01.2012
