css - tamaño - ¿Cómo usar font-weight con font-face?

tamaño de letra css

Question

Tengo dos archivos de fuentes como: FONT-light y FONT-bold. Ambos vienen de @ font-face kit, por lo que cada versión tiene como 5 archivos de fuente incluidos (OGV, TTF, WOFF, EOT)

Para pasar de la versión light a la versión en negrita, tengo que usar font-family: FONT-light; y luego font-family: FONT-bold; . Quiero usar font-weight: light; y font-weight: bold; en su lugar porque lo necesito para las transiciones de CSS3. ¿Cómo logro eso?

Answer 1

Usar el font-weight font-style propiedades de font-style en las fuentes incrustadas ( @font-face ) no es tan simple. Hay algunos elementos que necesita cuidar.

1 - Sintaxis de @font-face :

La sintaxis es muy importante para usar la fuente en todos los navegadores. Paul Irish, con muchos recursos, escribió la ''Sintaxis a prueba de balas'' , como se muestra arriba, que se mejoró varias veces:

@font-face {
  font-family: ''FONT-NAME'';
  src: url(''FONT-NAME.eot?'') format(''eot''), url(''FONT-NAME.woff'') format(''woff''),     url(''FONT-NAME.ttf'') format(''truetype'');
}

Esta versión ( http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ , busque ''La sintaxis de Fontspring @ font-face'' ), es la más reciente y funciona de IE6 , en iOS , Android . Es importante echar un vistazo en el enlace para aprender bien por qué debería escribirse de esa manera.

2 - Propiedades de font-weight como font-weight y font-style

Si lo desea, es posible aplicar el font-weight font-style y font-style de @font-face declaración @font-face para utilizar variaciones de la misma fuente, pero debe ser específico y preciso acerca de estas características. Hay algunas maneras de hacerlo.

2.1 - Usando una familia de fuentes para cada variación

Usando la ''Sintaxis a prueba de balas'' , suponiendo que desea cargar las variaciones ''Normal'' , ''Negrita'' e ''Cursiva'' , tenemos:

@font-face {
  font-family: ''FONT-NAME-normal'';
  src: url(''FONT-NAME-normal.eot?'') format(''eot''), url(''FONT-NAME-normal.woff'') format(''woff''), url(''FONT-NAME-normal.ttf'') format(''truetype'');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: ''FONT-NAME-bold'';
  src: url(''FONT-NAME-bold.eot?'') format(''eot''), url(''FONT-NAME-bold.woff'') format(''woff''), url(''FONT-NAME-bold.ttf'') format(''truetype'');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: ''FONT-NAME-italic'';
  src: url(''FONT-NAME-italic.eot?'') format(''eot''), url(''FONT-NAME-italic.woff'') format(''woff''), url(''FONT-NAME-italic.ttf'') format(''truetype'');

  font-weight: normal;
  font-style: normal;
}

Por lo tanto, para usar la variación que desee, debe llamar a la font-family que le corresponde Y declarar en la regla el font-weight: normal y font-style: normal . Si no lo hace, el navegador puede aplicar el ''faux bold / italic'' al elemento que tiene estas reglas de forma predeterminada. El estilo "falso" funciona obligando al elemento a mostrarse, incluso si ya está utilizando una fuente en cursiva o negrita. El problema con es que la fuente siempre se ve fea porque no es la forma en que se hizo.

Lo mismo ocurre cuando define una fuente ''Normal'' , por ejemplo, en un elemento <p> y, dentro de ella, coloca un <strong> o <em> . <strong> y <em> forzarán el proceso en negrita / cursiva sobre la fuente. Para evitar eso, debe aplicar la font-family correcta, con el destino de ser negrita / cursiva, a una regla para <strong> y <em> , con sus respectivas propiedades ( font-weight y font-style ) establecidas en normal :

strong {
  font-family: ''FONT-NAME-bold'';
  font-weight: normal;
  font-style: normal;
}

em {
  font-family: ''FONT-NAME-italic'';
  font-weight: normal;
  font-style: normal;
}

Pero hay un problema con eso. Si sus fuentes no se cargan, las alternativas elegidas perderán sus pesos / estilos. Esto nos lleva al siguiente camino.

2.2 - Usando el mismo nombre de familia de fuente, pero diferentes pesos y estilos

Esta forma es más simple de manejar a través de varios pesos y estilos Y las reservas de manera correcta si las fuentes no se cargan. Usando el mismo ejemplo:

@font-face {
  font-family: ''FONT-NAME'';
  src: url(''FONT-NAME-normal.eot?'') format(''eot''), url(''FONT-NAME-normal.woff'') format(''woff''), url(''FONT-NAME-normal.ttf'') format(''truetype'');

  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: ''FONT-NAME'';
  src: url(''FONT-NAME-bold.eot?'') format(''eot''), url(''FONT-NAME-bold.woff'') format(''woff''), url(''FONT-NAME-bold.ttf'') format(''truetype'');

  font-weight: 700;
  font-style: normal;
}

@font-face {
  font-family: ''FONT-NAME'';
  src: url(''FONT-NAME-italic.eot?'') format(''eot''), url(''FONT-NAME-italic.woff'') format(''woff''), url(''FONT-NAME-italic.ttf'') format(''truetype'');

  font-weight: normal;
  font-style: italic;
}

En este método, los pesos y estilos en las declaraciones de @font-face actúan como "marcadores". Cuando un navegador se encuentra con esos pesos y estilos en otras partes del CSS, sabe a qué @font-face declaración acceder y qué variación de la fuente debe usar.

Asegúrese de que sus pesos y estilos coinciden. Si es así, cuando use un <strong> o <em> dentro de un padre que esté usando @font-face que creó, cargará la declaración correcta.

En la fuente de estos métodos de estilización incorporados ( http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/ ), tienen otro método que combina el Dos que he mencionado (el 2.1 y el 2.2 ). Pero conlleva muchos problemas, incluido el ''faux bold / italic'' , que lo obliga a declarar a la <strong> font-family correcta y, para el <em> , las classes estilos sobre las variaciones de la font que difiere en weight Supongo que los dos que he elegido son lo suficientemente buenos para hacer el trabajo.

Fuentes: http://www.paulirish.com/2009/bulletproof-font-face-implementation-syntax/ http://coding.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/

Edición 1:

No hay necesidad de usar muchas extensiones de fuente. El tipo .woff es .woff casi todos los navegadores, excepto para IE, si necesita dar soporte para IE8 (que solo acepta el formato .eot ). ( http://caniuse.com/#feat=fontface )

Otro consejo que quizás sea útil es incrustar la fuente en el CSS utilizando la codificación base64 . Esto ayudará a evitar una gran cantidad de solicitudes, pero debe recordar que superará el tamaño del archivo CSS. Esto se puede manejar organizando el contenido CSS y las fuentes para dar las primeras reglas CSS rápidamente en un archivo pequeño, entregando las demás en otro archivo CSS, en la etiqueta de cierre de <body> .

Answer 2

puede agregar un número a la propiedad font-weight, por ejemplo, a la versión light.

font-weight: normal; //  light version as it is.
font-weight: 700; // makes light version bolder. 

Answer 3

@font-face {
    font-family: ''DroidSerif'';
    src: url(''DroidSerif-Regular-webfont.ttf'') format(''truetype'');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: ''DroidSerif'';
    src: url(''DroidSerif-Italic-webfont.ttf'') format(''truetype'');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: ''DroidSerif'';
    src: url(''DroidSerif-Bold-webfont.ttf'') format(''truetype'');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: ''DroidSerif'';
    src: url(''DroidSerif-BoldItalic-webfont.ttf'') format(''truetype'');
    font-weight: bold;
    font-style: italic;
}

Del tutorial: http://www.456bereastreet.com/archive/201012/font-face_tip_define_font-weight_and_font-style_to_keep_your_css_simple/