Scegli il tuo tipo di carattere. Ad esempio prendo lo "Stint Ultra Expanded". C'è ad esempio come aggiungere alla tua pagina:
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
prendere solo il href e aprirlo in browser. Vedrete dovrebbe occupare in questo modo:
@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');
}
Prendere primo parametro di url valore da src proprietà (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw. woff).
Scarica questo file.
Utilizzare il parametro di local valore della src proprietà come il nome del file (Stint Ultra Expanded)
Un modo semplice è quello di scaricare il programma sta usando wget:
wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff
Creare ora file css e aggiungi contenuto che hai visto prima. Ma è necessario modificare il valore della proprietà src. Rimuovi tutti gli local e regola url. Dovrebbe essere smth come questo:
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}
Ora aggiungere il file CSS per estensione e utilizzare il tipo di carattere:
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>
Se volete usa questo carattere in content_script devi regolare url nel tuo 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');
}
È possibile aggiungere tutte le regole @font-face nel proprio css come desiderato.
Avviso: il valore local nella proprietà src indica quale nome deve essere utilizzato per memorizzarlo. È una buona idea usare questo nome.
Secondo avviso: se lo si utilizza come previsto da Google, il browser controlla se questo carattere è già disponibile locale. Se questo non è il caso, verrà scaricato e memorizzato. Quindi la prossima volta userebbe il carattere che è stato precedentemente memorizzato.
Come di Chrome 37 (forse prima), è necessario citare la fonte come risorsa accessibile web nel manifesto della estensione:
"web_accessible_resources": [
"font/*.woff2"
]
altrimenti si sarebbe visualizzato un errore simile:
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.
Questo non funziona per i pacchetti di applicazioni. 'web_accessible_resources' è consentito solo per estensioni, app in hosting e app preesistenti in pacchetto, ma questa è un'app in pacchetto. –
Non riuscivo a ottenere questo metodo per funzionare nel popup della mia estensione di Chrome. – offthat
è vero che "web_accessible_resources" è consentito solo per le estensioni, ma semplicemente il download e l'integrazione del font (come descritto nella prima parte della risposta) funziona perfettamente nelle app in pacchetto. – schellmax