@ font-face y tamaño de letra

Question

La idea a continuación es la primera @ font-face para Firefox, la segunda para IE y Arial para cualquier otra cosa que no tenga sentido para las dos primeras. Está todo funcionando, excepto que quiero dar un tamaño diferente en el caso de Arial, y no he descubierto la sintaxis para hacerlo.

@font-face { 
    font-family: Tribeca; 
    src: url("Tribeca.ttf"); format("truetype"); 
} 

@font-face { 
    font-family: TribecaIE; 
    src: url("Tribec0.eot"); 
} 

BODY 
{ 
    FONT-FAMILY: Tribeca, TribecaIE, Arial; font-size: 195%; 
} 

Answer 1

Este no es compatible con las reglas CSS normales ..

Creo que sus opciones son

• la propiedad de CSS font-size-adjust
• Javascript (jQuery), y la verificación para la fuente actual para ver cuál de las tres es efectiva y ajustar el tamaño de la fuente en consecuencia ... http://www.w3.org/TR/css3-fonts/#font-size-adjust () también debe tener Una mirada a loshttp://www.modernizr.com/)

Answer 2

BODY 
{ 
    FONT: 140% Arial; 
    FONT: 195% Tribeca,TribecaIE; 
} 

Answer 3

No creo que esto es posible con css solo; probablemente necesitemos usar javascript.

Todo lo que queremos hacer es especificar un tamaño de letra diferente si Arial es la fuente activa. Detectar la fuente activa no es exactamente sencillo, pero aquí hay un método que funcionará para nuestro propósito particular. Podemos crear un elemento temporal que contenga algunos caracteres Arial y medir su ancho, y luego crear un segundo elemento que contenga caracteres sin especificar una fuente (de modo que adopte de forma predeterminada la fuente "activa") y comparar anchos. Esto no nos dirá qué fuente está actualmente activa, pero puede indicar si una de las fuentes incorporadas se cargó con @ font-face, ya que ciertamente no tendrá el mismo ancho que Arial. Si los anchos de los dos elementos no son iguales, sabemos que Arial no pudo haber cargado, por lo que solo ajustaremos el tamaño de la fuente si los anchos son iguales.

Incluso si el navegador no puede cargar la fuente Arial, nuestra prueba sigue siendo funcional, porque cuando especificamos Arial durante la prueba, el navegador tendrá la misma fuente que para el segundo elemento. Ambos elementos seguirán teniendo el mismo ancho si el navegador no puede cargar las fuentes incrustadas con @ font-face.

Si alguien desea que lo ilustre con el código, me complacerá escribir el javascript.

Answer 4

Creo que es este (cerca de lo que tiene):

@font-face { 
    font-family: Tribeca; 
    src: url("Tribeca.ttf"); 
} 

@font-face { 
    font-family: Tribeca; 
    src: url("Tribeca.eot"); 
} 

body { 
    font-family: Tribeca, Arial; 
} 

IE no sabrá cómo abrir la ttf, por lo que no se molestará. Luego se abrirá el eot. Luego, especifique la fuente con el nombre dado en la declaración body.

Answer 5

Oriente sus navegadores sabiendo cuál lee qué tipo de declaración. Comentario condicional carga diferentes llamadas CSS. Luego puede decirle específicamente a cada uno que haga algo diferente por regla.

También hay Typekit

Answer 6

@font-face { 
    font-family: 'Tribeca'; 
    src: url(Tribeca.eot); 
    src: local('Tribeca'), url(Tribeca.ttf) format('truetype'); 
    } 

MSIE ignorará la última línea cos que no entiende format regla. y sí, tal como lo señala porneL arriba, format() debe ir en la propiedad src.

local() hará que los navegadores compatibles utilicen el archivo de fuente local si el usuario lo tiene en lugar de descargarlo de su servidor (y probablemente también haga que IE ignore la línea).

en cuanto al ajuste del tamaño de la fuente, como lo señala Gaby: CSS 3 font-size-adjust. pero parece que todavía no es ampliamente compatible.

Answer 7

Para anular la duplicación de código con @ font-face, puede hacerlo a través del servidor. Si utiliza, por ejemplo, algún urlrewrite, detecte UA, si es IE - devuelve el archivo con extensión .eot, si es navegador normal - ttf.

En cuanto a mí, funciona muy bien.

Y para este caso, no debe cambiar sus archivos CSS, solo debe tener 2 archivos: .ttf & .oet.

Answer 8

Aunque está en contra de las buenas prácticas normales al usar CSS, puede usar la declaración !important en su CSS condicional.

Como ejemplo, creamos dos hojas de estilo: la 'predeterminada', que tendrá una sección para estilos específicos de Firefox y una hoja de estilos de Internet Explorer.

Luego, utilizando la <link rel="" /> método estándar de hojas de estilo importadores:

<link rel="stylesheet" href="normal/css/file.css" type="text/css" media="screen, projection"> 

<!--[if IE]><link rel="stylesheet" href="http://mysite.com/path/to/ie6.css" type="text/css" media="screen, projection"><![endif]--> 

Dentro de la hoja de estilo 'por defecto', nuestros estilos de Firefox están envueltos en lo siguiente:

@-moz-document url-prefix() { 

    #my-id { font-size: 100%; } 

} 

Esto funciona porque el @-moz-document url-prefix() sección es cómo los complementos de Firefox diseñan las páginas web. Por lo tanto, otros navegadores no lo entienden y, por lo tanto, sáltelo.