css - otf - fuentes html para web
Hacer que las fuentes de Adobe funcionen con CSS3 @ font-face en IE9 (18)
Estoy en proceso de crear una pequeña aplicación de intranet e intentaré, sin suerte, usar la fuente de Adobe que compré últimamente. Como me informaron, en nuestro caso no se trata de una violación de licencia.
Convertí las versiones .ttf / .otf de la fuente en .woff, .eot y .svg, de modo que apunte a todos los principales navegadores. La sintaxis de @ font-face que utilicé es básicamente la de Bulletproof de Font Spring :
@font-face {
font-family: ''MyFontFamily'';
src: url(''myfont-webfont.eot'');
src: url(''myfont-webfont.eot?#iehack'') format(''eot''),
url(''myfont-webfont.woff'') format(''woff''),
url(''myfont-webfont.ttf'') format(''truetype''),
url(''myfont-webfont.svg#svgFontName'') format(''svg'');
}
Modifiqué los encabezados HTTP (se agregó Access-Control-Allow-Origin = "*") para permitir referencias entre dominios. En FF y Chrome funciona perfectamente, pero en IE9 me sale:
CSS3111: @font-face encountered unknown error.
myfont-webfont.woff
CSS3114: @font-face failed OpenType embedding permission check. Permission must be Installable.
myfont-webfont.ttf
Me di cuenta de que al convertir fuentes de .ttf / .otf a .woff también obtengo un archivo .afm , pero no tengo ni idea de si es importante o no ...
¿Alguna idea de cómo resolverlo?
[Editar]: alojo mis sitios web (también fuentes, pero en un directorio y subdominio separados para contenido estático) bajo IIS 7.5
Una respuesta diferente: problemas legales.
Hay un par de cosas que notar antes de hacer esto. Primero, para obtener este error, en IE, inspeccionar el elemento, cambiar las pestañas y buscar los errores, creo que aparece "CSS3114" en la consola.
Lo que necesita comprender es que este es un problema de licencia. IE (juego de palabras intencionado) si está intentando cargar una fuente que causa este error, no tiene permisos en el archivo para usar la fuente, y si no tiene permiso, es muy probable que pueda perder un batalla legal (que a su vez es muy poco probable) sobre el uso de esta fuente de esta manera a menos que tenga la licencia. Por lo tanto, puede, por primera vez, agradecer a IE por ser el único navegador que le dice "no", porque al menos le permite saber que está haciendo algo cuestionable.
Dicho eso, aquí está tu respuesta:
Primero asegúrese de estar usando el mejor código en .css, vea algunas de las otras respuestas CSS para eso.
Ejemplo de IE 11 css (trabajos en todos los navegadores modernos pueden necesitar ser retocados para IE9):
@font-face {
font-family: "QuestionableLegalFont";
font-weight: bold;
src: url(''../fonts/QuestionableLegalFont.ttf'') format(''truetype'');
}
Luego, asegúrese de tener una fuente web funcional (probablemente ya sepa esto al ver su fuente en otros navegadores). Si necesita un convertidor de fuentes en línea, consulte aquí: https://onlinefontconverter.com/
Finalmente, para deshacerse del error "CSS3114". Para una herramienta en línea, haga clic aquí: https://www.andrebacklund.com/fontfixer.html
Como dijo Knu, puede usar tool , sin embargo, está compilada solo para MS-DOS. Lo compilé para Win64. Download .
Uso:
Coloque el .exe en la misma carpeta que la fuente que necesita modificar
Navega a ese directorio en la línea de comando
escriba
embed fontname.fonttype, reemplazando fontname con el nombre de archivo y fonttype con la extensión ieembed brokenFont.ttf¡Todo listo! Tu fuente ahora debería funcionar.
Como usuario de Mac, no pude usar las herramientas de línea de comandos de MS-DOS y Windows que se mencionaron para corregir el permiso de incrustación de fuentes. Sin embargo, descubrí que puede solucionar esto usando FontLab para establecer el permiso a ''Todo está permitido''. Espero que esta receta sobre cómo configurar el permiso de fuente para Installable en Mac OS X también sea útil para otros.
Debe establecer el formato de la fuente ie ''embedded-opentype'' y no ''eot''. Por ejemplo:
src: url(''fontname.eot?#iefix'') format(''embedded-opentype'')
El problema podría estar relacionado con la configuración del servidor; es posible que no esté enviando los encabezados correctos para los archivos de fuentes. Eche un vistazo a la respuesta dada para la pregunta IE9 bloquea la descarga de fuente web de origen cruzado .
EricLaw sugiere agregar lo siguiente a su configuración de Apache
<FilesMatch "/.(ttf|otf|eot|woff)$">
<IfModule mod_headers.c>
Header set Access-Control-Allow-Origin "http://mydomain.com"
</IfModule>
</FilesMatch>
Es cierto que IE9 requiere fuentes TTF para tener los bits de incrustación establecidos en Installable. El generador hace esto automáticamente, pero actualmente estamos bloqueando las fuentes de Adobe por otros motivos. Podemos levantar esta restricción en el futuro cercano.
Esto funciona para mí:
@font-face {
font-family: FontName;
src: url(''@{path-fonts}/FontName.eot?akitpd'');
src: url(''@{path-fonts}/FontName.eot?akitpd#iefix'') format(''embedded-opentype''),
url(''@{path-fonts}/FontName.ttf?akitpd'') format(''truetype''),
url(''@{path-fonts}/FontName.woff?akitpd'') format(''woff''),
url(''@{path-fonts}/FontName.svg?akitpd#salvage'') format(''svg'');
}
Hace poco encontré este problema con las fuentes .eot y .otf que producen los errores CSS3114 y CSS3111 en la consola al cargar. La solución que funcionó para mí fue usar solo formatos .woff y .woff2 con un formato .ttf de respaldo. Los formatos .woff se usarán antes de .ttf en la mayoría de los navegadores y no parecen desencadenar el problema de permisos de incrustación de fuentes (css3114) y la fuente que da nombre al formato incorrecto (css3111). Encontré mi solución en este artículo extremadamente útil sobre el problema CSS3111 y CSS3114 , y también leí este artículo sobre el uso de @ font-face .
nota: esta solución no requiere volver a compilar, convertir o editar ningún archivo de fuente. Es una solución de solo CSS. La fuente que probé tenía versiones .eot, .otf, .woff, .woff2 y .svg generadas para ella, probablemente de la fuente original .ttf que produjo el error 3114 cuando lo probé, sin embargo, el .woff y. Los archivos woff2 parecían ser inmunes a este problema.
Esto es lo que DID me funcionó con @ font-face:
@font-face {
font-family: "Your Font Name";
font-weight: normal;
src: url(''your-font-name.woff2'') format(''woff2''),
url(''your-font-name.woff'') format(''woff''),
url(''your-font-name.ttf'') format(''truetype'');
}
Esto fue lo que desencadenó los errores con @ font-face en IE:
@font-face {
font-family: ''Your Font Name'';
src: url(''your-font-name.eot'');
src: url(''your-font-name.eot?#iefix'') format(''embedded-opentype''),
url(''your-font-name.woff2'') format(''woff2''),
url(''your-font-name.woff'') format(''woff''),
url(''your-font-name.ttf'') format(''truetype''),
url(''your-font-name.svg#svgFontName'') format(''svg'');
}
Me estaba llegando el siguiente error:
CSS3114: @ font-face falló la verificación de permiso de incorporación de OpenType. El permiso debe ser instalable.
fontname.ttf
Después de usar el siguiente código, mi problema se resolvió ...
src: url(''fontname.ttf'') format(''embedded-opentype'')
¡Gracias chicos por ayudarme!
Aclamaciones,
Renjith.
Para todos los que obtengan el error: "tableversion debe ser 0, 1 oy es hexadecimal: 003" cuando se utiliza ttfpatch, he compilado incrustado para 64 bits. No he cambiado nada, solo agregué libs de necesidad y compilé. Usar bajo su propio riesgo.
Uso: ConsoleApplication1 font.ttf
http://www.mediafire.com/download/8x1px8aqq18lcx8/ConsoleApplication1.exe
Perdí mucho tiempo debido a este problema. Finalmente encontré una gran solución yo mismo. Antes solo usaba la fuente .ttf. Pero agregué un formato de fuente extra .eu que comenzó a funcionar en IE.
Usé el siguiente código y funcionó como encanto en todos los navegadores.
@font-face {
font-family: OpenSans;
src: url(assets/fonts/OpenSans/OpenSans-Regular.ttf),
url(assets/fonts/OpenSans/OpenSans-Regular.eot);
}
@font-face {
font-family: OpenSans Bold;
src: url(assets/fonts/OpenSans/OpenSans-Bold.ttf),
url(assets/fonts/OpenSans/OpenSans-Bold.eot);
}
Espero que esto ayude a alguien.
Probé la herramienta ttfpatch y no funcionó de mí. Internet Exploder 9 y 10 todavía se quejó.
Encontré esta buena idea de Git y resolvió mis problemas. https://gist.github.com/stefanmaric/a5043c0998d9fc35483d
Simplemente copie y pegue el código en su css.
Pruebe esto, agregue estas líneas en web.config.
<system.webServer>
<staticContent>
<mimeMap fileExtension=".woff" mimeType="application/octet-stream" />
</staticContent>
</system.webServer>
Puedes resolverlo siguiendo el código
@font-face {
font-family: ''Font-Name'';
src: url(''../fonts/Font-Name.ttf'');
src: url(''../fonts/Font-Name.eot?#iefix'') format(''embedded-opentype'');
}
Si está familiarizado con nodejs / npm, ttembed-js es una forma fácil de establecer el indicador de "incrustación instalable permitido" en una fuente TTF. Esto modificará el archivo .ttf especificado:
npm install -g ttembed-js
ttembed-js somefont.ttf
Si quieres hacer esto con un script PHP en lugar de tener que ejecutar el código C (o estás en una Mac como yo y no puedes compilar con Xcode solo para esperar un año para que se abra), aquí hay una Función de PHP que puede usar para eliminar los permisos de incrustación de la fuente:
function convertRestrictedFont($filename) {
$font = fopen($filename,''r+'');
if ($font === false) {
throw new Exception(''Could not open font file.'');
}
fseek($font, 12, 0);
while (!feof($font)) {
$type = '''';
for ($i = 0; $i < 4; $i++) {
$type .= fgetc($font);
if (feof($font)) {
fclose($font);
throw new Exception(''Could not read the table definitions of the font.'');
}
}
if ($type == ''OS/2'') {
// Save the location of the table definition
// containing the checksum and pointer to the data
$os2TableDefinition = ftell($font);
$checksum = 0;
for ($i = 0; $i < 4; $i++) {
fgetc($font);
if (feof($font)) {
fclose($font);
throw new Exception(''Could not read the OS/2 table header of the font.'');
}
}
// Get the pointer to the OS/2 table data
$os2TablePointer = ord(fgetc($font)) << 24;
$os2TablePointer |= ord(fgetc($font)) << 16;
$os2TablePointer |= ord(fgetc($font)) << 8;
$os2TablePointer |= ord(fgetc($font));
$length = ord(fgetc($font)) << 24;
$length |= ord(fgetc($font)) << 16;
$length |= ord(fgetc($font)) << 8;
$length |= ord(fgetc($font));
if (fseek($font, $os2TablePointer + 8, 0) !== 0) {
fclose($font);
throw new Exception(''Could not read the embeddable type of the font.'');
}
// Read the fsType before overriding it
$fsType = ord(fgetc($font)) << 8;
$fsType |= ord(fgetc($font));
error_log(''Installable Embedding: '' . ($fsType == 0));
error_log(''Reserved: '' . ($fsType & 1));
error_log(''Restricted License: '' . ($fsType & 2));
error_log(''Preview & Print: '' . ($fsType & 4));
error_log(''Editable Embedding: '' . ($fsType & 8));
error_log(''Reserved: '' . ($fsType & 16));
error_log(''Reserved: '' . ($fsType & 32));
error_log(''Reserved: '' . ($fsType & 64));
error_log(''Reserved: '' . ($fsType & 128));
error_log(''No subsetting: '' . ($fsType & 256));
error_log(''Bitmap embedding only: '' . ($fsType & 512));
error_log(''Reserved: '' . ($fsType & 1024));
error_log(''Reserved: '' . ($fsType & 2048));
error_log(''Reserved: '' . ($fsType & 4096));
error_log(''Reserved: '' . ($fsType & 8192));
error_log(''Reserved: '' . ($fsType & 16384));
error_log(''Reserved: '' . ($fsType & 32768));
fseek($font, ftell($font) - 2);
// Set the two bytes of fsType to 0
fputs($font, chr(0), 1);
fputs($font, chr(0), 1);
// Go to the beginning of the OS/2 table data
fseek($font, $os2TablePointer, 0);
// Generate a new checksum based on the changed
for ($i = 0; $i < $length; $i++) {
$checksum += ord(fgetc($font));
}
fseek($font, $os2TableDefinition, 0);
fputs($font, chr($checksum >> 24), 1);
fputs($font, chr(255 & ($checksum >> 16)), 1);
fputs($font, chr(255 & ($checksum >> 8)), 1);
fputs($font, chr(255 & $checksum), 1);
fclose($font);
return true;
}
for ($i = 0; $i < 12; $i++) {
fgetc($font);
if (feof($font)) {
fclose($font);
throw new Exception(''Could not skip a table definition of the font.'');
}
}
}
fclose($font);
return false;
}
Asegúrese de hacer una copia de seguridad de su archivo de fuente antes de ejecutar este código y no me culpe si se corrompe.
La fuente original en C se puede encontrar tool .
eot archivo debe ponerse más allá de ttf . Si está bajo ttf , pensó que la fuente se muestra correctamente, IE9 todavía arrojará un error.
Recomendar:
@font-face {
font-family: ''Font-Name'';
src: url(''../fonts/Font-Name.eot?#iefix'') format(''embedded-opentype'');
src: url(''../fonts/Font-Name.ttf'') format(''truetype'');
}
No recomendado:
@font-face {
font-family: ''Font-Name'';
src: url(''../fonts/Font-Name.ttf'') format(''truetype'');
src: url(''../fonts/Font-Name.eot?#iefix'') format(''embedded-opentype'');
}