google chrome extension - quot - Empaquetar una fuente con una extensión de Google Chrome
extension google chrome developer (3)
Elige tu fuente. Como ejemplo tomaré "Stint Ultra Expanded" . Hay un ejemplo de cómo agregarlo a tu página:
<link href=''http://fonts.googleapis.com/css?family=Stint+Ultra+Expanded'' rel=''stylesheet'' type=''text/css''>
Toma solo el href y href en el navegador. Verás algo así:
@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'');
}
Tomar el primer parámetro del valor de url de la propiedad src ( http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5uq.wq.wq.wcqwqqwxqfxxffxrwVtsTkPbDajuO55QQwqwq.wcq )
Descarga este archivo.
Utilice el parámetro del valor local de la propiedad src como nombre de archivo ( Stint Ultra Expanded )
Una forma sencilla de descargarlo es usando wget:
wget -O "Stint Ultra Expanded.woff" http://themes.googleusercontent.com/static/fonts/stintultraexpanded/v1/FeigX-wDDgHMCKuhekhedWmdhyVWfbygZe-w47Q2x_f3rGVtsTkPsbDajuO5ueQw.woff
Ahora crea el archivo css y agrega el contenido que has visto antes. Pero tienes que cambiar el valor de la propiedad src . Eliminar todos los local y ajustar la url . Debería ser algo así:
@font-face {
font-family: ''Stint Ultra Expanded'';
font-style: normal;
font-weight: 400;
src: url(''../fonts/Stint Ultra Expanded.woff'') format(''woff'');
}
Ahora agregue su archivo css a la extensión y use la fuente:
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 desea utilizar esta fuente en content_script, debe ajustar la url en su 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'');
}
Puedes agregar tantas reglas de @font-face en tu css como quieras.
Aviso: local valor local en la propiedad src le indica qué nombre debe usarse para almacenarlo. Es buena idea usar este nombre.
Segundo aviso: si lo está utilizando como se esperaba de google, su navegador verificará si esta fuente ya está disponible localmente. Si este no es el caso, entonces sería descargado y almacenado. Así que la próxima vez usaría una fuente que fue almacenada previamente.
A partir de Chrome 37 (quizás antes), debe mencionar la fuente como un recurso accesible en la web en el manifiesto de la extensión:
"web_accessible_resources": [
"font/*.woff2"
]
De lo contrario, verías un error como:
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.
Quiero usar algo diferente a las fuentes estándar con mi extensión Chrome. Estaba entusiasmado con la posibilidad de usar las fuentes web de Google, pero parece que podría incurrir en una penalización por transferir la fuente web a través de la red siempre que su extensión la use, al punto de afectar el rendimiento de mi extensión. ¿Tengo alguna opción para empaquetar una fuente con mi extensión que funcione en todas las plataformas compatibles con Chrome (Windows / Mac / etc.)? Gracias por adelantado
Esto es bastante antiguo, pero para cualquier persona que aún tenga problemas con esto, es posible cargar el archivo de fuente con javascript. Tuve problemas para conseguir que una declaración de fuente tipográfica funcionara dentro de la sombra; todos los estilos se cargarían, pero Chrome ignoraría completamente la declaración de la fuente.
let font = new FontFace("yourFontName", "url(''path/to/font/file.woff'')");
document.fonts.add(font);
Esto funciona muy bien para mí. Probablemente se prefiera usar font-face, pero estoy bastante seguro de que mi caso de uso es un error en Chrome. Aquí está la especificación para ello.
Pedirle al usuario permisos para acceder a las fuentes web de Google es mucho menos esfuerzo que incrustarlos (incluso si esto pudiera tener mucho sentido para posibles escenarios fuera de línea).
manifest.json
"permissions": [
"http://fonts.googleapis.com/",
"https://fonts.googleapis.com/"
],