только загрузить @ font-face, используемый на этой странице - PullRequest
5 голосов
/ 13 марта 2012

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

Ответы [ 2 ]

12 голосов
/ 13 марта 2012

Я не знаю, как браузеры действительно реализуют его, но Модуль шрифтов CSS уровня 3 говорит в разделе " Рекомендации по загрузке шрифтов ", что браузеры должны загрузитьтолько шрифты, которые используются на текущей странице :

Правило @ font-face разработано так, чтобы разрешать отложенную загрузку шрифтов, шрифты загружаются только при необходимости для использования в документе.Таблица стилей может включать в себя правила @ font-face для библиотеки шрифтов, из которых используется только выбранный набор;Пользовательские агенты должны загружать только те шрифты, которые указаны в правилах стиля, применимых к данной странице.Пользовательские агенты, которые загружают все шрифты, определенные в правилах @ font-face, без учета того, действительно ли эти шрифты используются на странице, считаются несовместимыми.

Так что, в любом случае, в вашем коде вы можете 'Не указывайте какое-либо конкретное поведение, и если браузер совместим, он будет загружать только те, которые требуются для каждой страницы.

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

В случаях, когда шрифт может быть загружен в случае сбоя символа, пользовательские агенты могут загрузить шрифт, если он указан в списке шрифтов, но на самом деле его нет.используется для данного текстового прогона.

0 голосов
/ 13 марта 2012

Вы можете просто загрузить шрифт на странице, который заменит шрифт, указанный в CSS.

, например:

<head>
<link href='http://fonts.googleapis.com/css?family=Krona+One' rel='stylesheet' type='text/css'>
</head>

<body style="font-family: 'Krona One', sans-serif;">
CONTENT
</body>
...