Упаковка шрифта с расширением Google Chrome

Я хочу использовать что-то отличное от стандартных шрифтов с расширением Chrome. Я был в восторге от возможности использования веб-шрифтов Google, но, похоже, это может повлечь за собой штраф за передачу веб-шрифта по сети всякий раз, когда ваше расширение использует его, чтобы повлиять на производительность моего расширения. У меня есть какой-либо вариант для упаковки шрифта с моим расширением, который будет работать на всех поддерживаемых Chrome платформах (Windows/Mac/etc.)? Спасибо заранее

Ответ 1

Выберите свой шрифт. В качестве примера я возьму "Stint Ultra Expanded" . Пример добавления его на вашу страницу:

<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>

Возьмите только href и откройте его в браузере. Вы увидите smth вот так:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: local('Stint Ultra Expanded'), local('StintUltraExpanded-Regular'), url(http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff) format('woff');
}

Возьмите первый параметр значения url из свойства src (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff).

Загрузите этот файл.

Использовать параметр local значения свойства src как имя файла (Stint Ultra Expanded)

Легкий способ загрузить его с помощью wget:

wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff

Теперь создайте файл css и добавьте контент, который вы видели ранее. Но вы должны изменить значение свойства src. Удалите все local и настройте url. Это должно быть так:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}

Теперь добавьте свой файл css в расширение и используйте шрифт:

popup.html

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <link href='css/fonts.css' rel='stylesheet' type='text/css'>
</head>
<body>

    <span style="font-family: 'Stint Ultra Expanded';">Hello Font</span>

</body>
</html>

Если вы хотите использовать этот шрифт в content_script, вы должны настроить url в своем css:

@font-face {
  font-family: 'Stint Ultra Expanded';
  font-style: normal;
  font-weight: 400;
  src: url('chrome-extension://[email protected]@extension_id__/fonts/Stint Ultra Expanded.woff') format('woff');
}

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

Примечание. Значение local в src указывает, какое имя следует использовать для его хранения. Рекомендуется использовать это имя.

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

Как и в случае с Chrome 37 (возможно, раньше), вы должны указать шрифт как ресурс, доступный в Интернете, в манифесте расширения:

"web_accessible_resources": [
  "font/*.woff2"
]

В противном случае вы увидите ошибку, например:

Denying load of chrome-extension://{ID}/font/My Web Font.woff2. 
Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.

Ответ 2

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

manifest.json

"permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],