2011-04-19 30 views

Respuesta

3

puede utilizar el formato de archivo TTF directamente en css:

@font-face { 
font-family: Vinegar; 
src: url(http://www.4bit.co.uk/testing/design01/vinegar.ttf); 
} 

h3 { 
font-family: Vinegar, "Times New Roman", Times, serif; 
} 

Se está trabajando!

Or you can use this link to generate your font face!

+0

¿Esto no causaría problemas de compatibilidad? * he escuchado algo así, pero no estoy seguro ... * – jolt

+0

@Tom Nunca he visto un problema de compatibilidad con esta sintaxis. ¡es una sintaxis antigua y es compatible con navegadores desde 2000! –

+0

Bueno, aquí hay un artículo http://randsco.com/index.php/2009/07/04/p680 ... desplácese hacia abajo a ** Vamos, ¿es realmente así de simple? ** parte, allí usted tenerlo, IE solo es compatible con '* .eot'. O eso es solo un mito? – jolt

11

Si está en Linux, puede usar FontForge, que puede tener un script de Python.

#!/usr/bin/python 
import fontforge 
font = fontforge.open(“STIXGeneral.otf”) 
font.generate(“STIXGeneral.ttf”) 

Aquí es un script en Python, ya que hace esto por un directorio completo a la vez:

http://fonts.fileformat.info/bin/otf2ttf.py

+0

Supongo que necesita 'apt-get install fontforge python-fontforge' o si está en OS X intente http://stackoverflow.com/a/26313183/179581 – Andrei

2

Para navegadores/soporte móvil que sin duda necesita al menos tres formatos:

  1. OpenType integrado: eot para Internet Explorer 6-8.
    No es un convertidor de línea de comandos: http://code.google.com/p/ttf2eot/

  2. Web Open Font Format: woff la recomendación W3C para fuentes web: http://www.w3.org/TR/WOFF/
    Un convertidor puede ser aficionado aquí: http://people.mozilla.org/~jkew/woff/

  3. y TrueType: ttf para Safari y Opera

  4. (Puede agregar gráficos vectoriales escalables: svg para el soporte iOS anterior ...)

La prueba de balas @ font-face sintaxis es la siguiente:

@font-face { 
    font-family: 'Vinegar'; 
    src: url('vinegar.eot?') format('embedded-opentype'), 
     url('vinegar.woff') format('woff'), 
     url('vinegar.ttf') format('truetype'), 
     url('vinegar.svg#svgVinegar') format('svg'); 
} 

Otros recursos:
http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/
http://www.fontspring.com/blog/the-new-bulletproof-font-face-syntax
http://webfonts.info/

Es posible que también desee comprobar hacia fuera esta herramienta:
https://github.com/zoltan-dulac/css3FontConverter

+0

La última versión de IE es 11. Soportar IE 8 o inferior es una pérdida de tiempo a menos que sea específicamente instruido por un cliente importante. Como tal, la línea 'url ('vinegar.eot?') ('Embedded-opentype')' puede ser eliminada. –

3

Fue dolorosamente difícil encontrar cómo hacerlo correctamente. Así es como yo tengo que trabajar en OS X

$ brew install fontforge 
$ fontforge -c 'Open("my.ttf"); Generate("my.otf")' 

que estaba buscando desesperadamente pip install fontforge que no existe y no he conseguido que funcione con el pitón - Creo que se necesita para compilar con --enable-pyextension o alguna cosa.

+0

Respuesta perfecta para mí, también estoy en OS X y, de hecho, 'pip install fontforge' no funcionó. Sin embargo, ya uso Homebrew, por lo que tu respuesta me golpeó la cabeza. :-) –

+0

Esta es la mejor respuesta. Todos los convertidores en línea son inútiles ya que no funcionan o no requieren pagar. – Leszek

Cuestiones relacionadas