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

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

источник

2013-10-06 user2852001

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

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

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

@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 имущества в качестве имени файла (воробей Ультра Расширенной)

Легкий способ скачать его использует 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.

источник

2013-10-08 09:12:20

Это не работает для пакетов приложений. «web_accessible_resources» разрешен только для расширений, размещенных приложений и устаревших пакетов приложений, но это пакетное приложение. –

Я не мог заставить этот метод работать во всплывающем окне расширения Chrome. – offthat

Верно, что «web_accessible_resources» разрешен только для расширений, но просто загрузка и интеграция шрифта (как описано в первой части ответа) отлично работает в упакованных приложениях. – schellmax

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

manifest.json

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

источник

2014-02-22 00:05:40

Это не будет работать в упакованных приложениях, но будет работать в расширениях. –

@WillScott вы нашли решение для упакованных приложений? –

Как бы вы добавили ссылку CSS в расширение? Я попробовал это в манифесте, но там не работал. – Hannobo

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

ответ

Смежные вопросы