Wählen Sie Ihre Schriftart. Als Beispiel nehme ich "Stint Ultra Expanded". Es ist beispielsweise, wie es zu Ihrer Seite hinzufügen:
<link href='http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded' rel='stylesheet' type='text/css'>
Nehmen Sie die href nur und öffnen Sie sie in Browser. Sie werden smth wie diese:
@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');
}
Nehmen erste Parameter von url Wert von src Eigenschaft (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw. woff).
Diese Datei herunterladen.
Mit dem Parameter von local Wert von src Eigenschaft als Dateiname (Stint Ultra- Expanded)
einfache Art und Weise ist es zum Download unter Verwendung von wget:
wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff
nun CSS-Datei erstellen und Inhalte hinzufügen, dass du hast es schon einmal gesehen. Aber Sie müssen Wert von src Eigenschaft ändern. Entfernen Sie alle local s und stellen Sie url ein.
@font-face {
font-family: 'Stint Ultra Expanded';
font-style: normal;
font-weight: 400;
src: url('../fonts/Stint Ultra Expanded.woff') format('woff');
}
Nun fügen Sie Ihre CSS-Datei zu Erweiterung und verwenden Sie die Schrift:
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>
Wenn Sie möchten Es sollte so sein smth Verwenden Sie diese Schriftart in content_script Sie müssen url in Ihrem css:
anpassen 10
@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');
}
Sie können so viele @font-face Regeln in Ihrem CSS hinzufügen, wie Sie möchten.
Hinweis: local Wert in src Eigenschaft sagt Ihnen, welcher Name verwendet werden soll, um es zu speichern. Es ist eine gute Idee, diesen Namen zu verwenden.
Zweiter Hinweis: Wenn Sie es wie Google erwartet verwenden, würde Ihr Browser überprüfen, ob diese Schriftart bereits lokal verfügbar ist. Wenn dies nicht der Fall ist, wird es heruntergeladen und gespeichert. Beim nächsten Mal würde es eine Schriftart verwenden, die zuvor gespeichert wurde.
Ab Chrome 37 (vielleicht früher), die Schriftart als Web zugänglich Ressource in Manifest der Erweiterung erwähnen müssen:
"web_accessible_resources": [
"font/*.woff2"
]
Sonst wäre ein Fehler angezeigt, wie:
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.
Dies funktioniert nicht für Pakete Apps. 'web_accessible_resources' ist nur für Erweiterungen, gehostete Anwendungen und veraltete Paket-Apps zulässig, dies ist jedoch eine gepackte App. –
Ich konnte nicht scheinen, dass diese Methode im Popup meiner Chrome-Erweiterung funktioniert. – offthat
es ist wahr, dass 'web_accessible_resources' nur für Erweiterungen erlaubt ist, aber einfach herunterladen und integrieren die Schriftart (wie im ersten Teil der Antwort beschrieben) funktioniert gut in gepackten Apps. – schellmax