2011-07-27 20 views
10

estoy trabajando en un sitio web y en la actualidad el uso de la @ font-face tehnique (this + this) para cargar las fuentes. Me di cuenta de que algunos de los caracteres especiales no se están cargando correctamente -> ŠĐŽČĆ šđžčć. Esto es, esos caracteres existen en la fuente misma. Por lo tanto, hice una prueba ... Cargué una página de prueba con fuentes @ font-face y fuentes Cufon ... El resultado está por debajo de ->@ font-face vs Cufon

enter image description here

y, por supuesto, aquí el código ->

<html> 
    <head> 
     <script type="text/javascript" src="cufon-yui.js"></script> 
     <script type="text/javascript" src="ReprobateCRO_400.font.js"></script> 
     <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-2" /> 
     <script type="text/javascript">Cufon.set('fontFamily', 'ReprobateCRO').replace('h1');</script> 
     <style type="text/css"> 
      @font-face { 
       font-family: 'ReprobateCROLASTRegular'; 
       src: url('reprob_cro_last_last-webfont.eot'); 
       src: local('ReprobateCROLASTRegular'), 
        url('reprob_cro_last_last-webfont.eot?#iefix') format('embedded-opentype'), 
        url('reprob_cro_last_last-webfont.woff') format('woff'), 
        url('reprob_cro_last_last-webfont.ttf') format('truetype'), 
        url('reprob_cro_last_last-webfont.svg#ReprobateCROLASTRegular') format('svg'); 
       font-weight: normal; 
       font-style: normal; 
      } 
      h2{ 
       font-family:ReprobateCROLASTRegular; 
      } 
     </style> 
    </head> 
    <body> 
     <h1>--> CUFON --> šđžčć ŠĐŽČĆ</h1> 
     <br/><br/> 
     <h2>--> @FONT-FACE --> šđžčć ŠĐŽČĆ</h2> 
    </body> 
</html> 

hasta ahora he tryed cambiar la codificación de UTF8, widnwos1250, y nada parece funcionar con el tipo de letra cara @ tehnique ...

Por lo tanto, tengo dos preguntas ... Do ¿Alguien sabe lo que está pasando aquí? Y, si cambio a usar cufon en lugar de @ font-face, ¿cuánto demoraría eso la carga de la página? (Concidering Cufon utiliza JS para cargar las fuentes)

Gracias por su tiempo!

+1

Debo estar perdiendo algo, pero parece correcto para mí ... –

+0

@Andrej qué navegador está usando? –

+0

los carácteres especiales de @ font-face están en mal estado en todos los navegadores modernos ... probados en Chrome, Firefox, IE> 7, ópera, safari ... tienen el mismo aspecto en todas partes ... – Andrej

Respuesta

9

Yo mismo tuve muchos problemas con @ font-face recientemente mientras trabajaba en un sitio web intensivo de fuentes web y resultó que las herramientas de generación de fuentes web en línea eran las culpables. Ellos simplemente generan mal .woff/.ttf/.svg/.otf archivos que se tradujo en una gran cantidad de temas para los cuales era muy difícil de localizar el origen del problema.

En mi experiencia el único servicio de generación de la Web de fuentes en línea que proporciona el 100% válidos - Edición Free Web-fonts es Font Squirrel. También permite muchas cosas útiles, como el subconjunto de fuentes, que también podría ser el problema en su caso (es decir, no especificó incluir caracteres adicionales en las fuentes web generadas; serbio/croata es parte de Latin Extended B si no estoy confundiendo).

0

Usted parece haber resuelto el problema de la fuente; re: los tiempos de carga, mi experiencia es que tanto font-face como cufon serán lo suficientemente lentos como para tener un breve destello de texto predeterminado. Depende de su host y la conexión del curso del usuario; pero ambos métodos requieren una descarga relativamente pesada (ya sea el JS o la fuente).

lo tanto, todo lo demás es igual en mi humilde opinión puede también utilizar font-face; al menos los navegadores mejoran el almacenamiento en caché del archivo de fuentes, por lo que después de la carga inicial de la página puede obtener una representación más rápida. Con cufon siempre tiene que cargar y ejecutar el JS para que nunca te deshagas de esa parte del tiempo de carga.

0

Su implementación es buena.

Pero cuando se utiliza font-face. La fuente que usaste Debe tener todos los caracteres que desee usar. El .ttf o lo que debe tener todos los personajes y caracteres especiales cuando lo usará.

Cuando utilizó Cufon. El generador de Cufon hace muchas letras de letra adicionales para ti. En el generador de fuentes de Cufon. Puede seleccionar muchos extra para la fuente.

¿Lo entiendes?

1

El H2 tiene una definición de fuente incorrecta: faltan las comillas simples.

Es ahora:

font-family:ReprobateCROLASTRegular; 

debe ser:

font-family:'ReprobateCROLASTRegular'; 
Cuestiones relacionadas