L'emballage d'une police avec une extension Google Chrome

Je veux utiliser autre chose que les polices standard avec mon extension Chrome. J'étais excité au sujet de la possibilité d'utiliser les Polices Web de Google, mais il semble que pourrait encourir une pénalité pour le transfert de polices web sur le réseau à chaque fois que votre extension utilise, au point d'affecter les performances de mon extension. Puis-je avoir une option pour l'emballage d'une police avec mon extension qui fonctionne sur tous les Chrome de plates-formes (Windows/Mac/etc.)? Merci d'avance

InformationsquelleAutor user2852001 | 2013-10-06
  1. 47

    Choisissez votre police. Comme exemple, je vais prendre "Passage Ultra Élargi". Il est un exemple de comment l'ajouter à votre page:

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

    Ne prendre que le href et de l'ouvrir dans le navigateur. Vous verrez quelque chose comme ceci:

    @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');
}

    Prendre le premier paramètre de url valeur de src propriété (http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff).

    Maintenant télécharger ce fichier.

    Utiliser le paramètre de local valeur de src bien comme nom de fichier (Passage Ultra Élargi)

    Moyen facile est de téléchargement c'est à l'aide de wget:

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

    Maintenant créer le fichier css et ajouter le contenu que vous avez vu avant.
    Mais vous devez changer la valeur de la src de la propriété. Supprimer tous les locals et ajuster url. Il convient de qch comme ceci:

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

    Maintenant, ajoutez votre fichier css à l'extension et à l'utilisation de la police:

    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>

    Si vous souhaitez utiliser cette police dans content_script vous devez ajuster url dans votre css:

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

    Vous pouvez ajouter autant de @font-face règles dans votre css que vous le souhaitez.

    Avis: local valeur dans src propriété vous indique le nom qui doit être utilisé pour stocker. C'est une bonne idée d'utiliser ce nom.

    Deuxième avis: Si vous utilisez google comme prévu, votre navigateur serait de vérifier si cette police est déjà disponible. Si ce n'est pas le cas, alors il devrait être téléchargés et stockés. Alors, la prochaine fois il ferait usage de la police qui a été précédemment enregistrées.

    De Chrome 37 (peut-être plus tôt), vous devez mentionner la police comme une ressource web accessible à l'extension du fichier manifeste:

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

    Sinon, vous voyez un message d'erreur comme:

    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.
    • Cela ne fonctionne pas pour les packages d'applications. 'web_accessible_resources' est autorisé que pour les extensions, applications hébergées, et l'héritage emballés applications, mais c'est un emballés app.
    • Je n'arrivais pas à obtenir que cette méthode de travail dans la fenêtre de mon extension Chrome.
    • il est vrai que "web_accessible_resources' est autorisé que pour les extensions, mais il suffit de la télécharger et de l'intégration de la police (comme décrit dans la première partie de la réponse) fonctionne très bien emballés applications.
    • Exactement quelles parties de __MSG_@@extension_id__ besoin d'être remplacer par mon id? Pour quelqu'un d'autre curieux, la réponse est "l'ensemble de la partie"
    • À l'époque, comme je l'ai écrit cette réponse (2013 - près de 6 ans ago) là où aucun besoin de remplacer quoi que ce soit. C'était exactement l'URL que vous avez à utiliser. Aujourd'hui, je ne sais pas si il y a un changement. Mais comme je vois ici il semble encore toujours correct.
    InformationsquelleAutor Walery Strauch
  2. 6

    C'est assez vieux, mais pour ceux qui sont encore avoir des problèmes avec cela, il est possible de charger le fichier de police avec javascript. J'ai eu de la difficulté à obtenir une police de la déclaration de travailler dans l'ombre dom; tous les styles charge mais chrome voudrais simplement ignorer le font-face déclaration complètement.

    let font = new FontFace("yourFontName", "url('path/to/font/file.woff')");
document.fonts.add(font);

    Cela fonctionne à merveille pour moi. À l'aide de font-face est sans doute préférable, mais je suis sûr que mon cas est un bug dans chrome. Voici les specs pour elle.

    • C'est la solution qui a fonctionné pour moi, mon cas d'utilisation semble similaire à la vôtre.
    InformationsquelleAutor qwerty
  3. 4

    Demander à l'utilisateur d'autorisations d'accès à des Polices Web de Google est beaucoup moins d'effort que leur incorporation (même si cela peut faire sens parfait pour une éventuelle off-line scénarios).

    manifeste.json

    "permissions": [
    "http://fonts.googleapis.com/",
    "https://fonts.googleapis.com/"
],
    • Cela ne fonctionnera pas dans les paquets d'applications, mais les travaux dans les extensions.
    • avez-vous trouvé une solution pour les applications?
    • Comment voulez-vous ajout le lien CSS puis dans l'extension? Je l'ai essayé dans le manifeste, mais ne pas y travailler.
    • Vous pouvez utiliser le @import propriété css dans un de vos fichiers css.
    InformationsquelleAutor Martin Zeitler