css - otf - ¿Cómo agregar varios archivos de fuentes para la misma fuente?

fuentes html para web

Question

Estoy buscando en la página de MDC la regla CSS de font-face , pero no entiendo nada. Tengo archivos separados para negrita , cursiva y negrita + cursiva . ¿Cómo puedo incrustar los tres archivos en una regla @font-face ? Por ejemplo, si tengo:

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

El navegador no sabrá qué fuente se usará para negrita (porque ese archivo es DejaVuSansBold.ttf), por lo que, por defecto, es algo que probablemente no quiero. ¿Cómo puedo decirle al navegador todas las diferentes variantes que tengo para una determinada fuente?

Answer 1

A partir de CSS3, la especificación ha cambiado, permitiendo solo un font-style único. Una lista separada por comas (por CSS2) se tratará como si fuera normal y anulará cualquier entrada anterior (predeterminada). Esto hará que las fuentes definidas de esta manera aparezcan en cursiva permanentemente.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

En la mayoría de los casos, la cursiva probablemente será suficiente y las reglas oblicuas no serán necesarias si se encarga de definir lo que va a usar y de mantenerlo.

Answer 2

La solución parece ser agregar varias reglas de @font-face , por ejemplo:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

Por cierto, parece que Google Chrome no conoce el argumento del format("ttf") , por lo que es posible que desee omitirlo.

(Esta respuesta fue correcta para la especificación CSS 2 CSS3 solo permite un estilo de fuente en lugar de una lista separada por comas).

Answer 3

Para que la variación de fuente funcionara correctamente, tuve que invertir el orden de @ font-face en CSS.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

Answer 4

Si está utilizando fuentes de Google, sugeriría lo siguiente.

Si desea que las fuentes se ejecuten desde su servidor local o servidor, necesita descargar los archivos.

En lugar de descargar los paquetes ttf en los enlaces de descarga, use el enlace en vivo que proporcionan, por ejemplo:

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

Pegue la URL en su navegador y debería obtener una declaración de fuente similar a la primera respuesta.

Abra las URL proporcionadas, descargue y cambie el nombre de los archivos.

Pegue las declaraciones de fuentes actualizadas con rutas relativas a los archivos woff en su CSS, y listo.

Answer 5

hoy en día, 2017-12-17. No encuentro ninguna descripción sobre la necesidad de Font-property-order en las spec . Y la prueba en cromo siempre funciona sea cual sea el orden.

@font-face {
  font-family: ''Font Awesome 5 Free'';
  font-weight: 900;
  src: url(''#{$fa-font-path}/fa-solid-900.eot'');
  src: url(''#{$fa-font-path}/fa-solid-900.eot?#iefix'') format(''embedded-opentype''),
  url(''#{$fa-font-path}/fa-solid-900.woff2'') format(''woff2''),
  url(''#{$fa-font-path}/fa-solid-900.woff'') format(''woff''),
  url(''#{$fa-font-path}/fa-solid-900.ttf'') format(''truetype''),
  url(''#{$fa-font-path}/fa-solid-900.svg#fontawesome'') format(''svg'');
}

@font-face {
  font-family: ''Font Awesome 5 Free'';
  font-weight: 400;
  src: url(''#{$fa-font-path}/fa-regular-400.eot'');
  src: url(''#{$fa-font-path}/fa-regular-400.eot?#iefix'') format(''embedded-opentype''),
  url(''#{$fa-font-path}/fa-regular-400.woff2'') format(''woff2''),
  url(''#{$fa-font-path}/fa-regular-400.woff'') format(''woff''),
  url(''#{$fa-font-path}/fa-regular-400.ttf'') format(''truetype''),
  url(''#{$fa-font-path}/fa-regular-400.svg#fontawesome'') format(''svg'');
}

Answer 6

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: ''DejaVu Sans'';
    src: url(''dejavu/DejaVuSans.ttf''); /* IE9 Compat Modes */
    src: 
        local(''DejaVu Sans''),
        local(''DejaVu-Sans''), /* Duplicated name with hyphen */
        url(''dejavu/DejaVuSans.ttf'') 
        format(''truetype'');
}
/*bold version*/
@font-face {
    font-family: ''DejaVu Sans'';
    src: url(''dejavu/DejaVuSans-Bold.ttf''); 
    src: 
        local(''DejaVu Sans''),
        local(''DejaVu-Sans''),
        url(''dejavu/DejaVuSans-Bold.ttf'') 
        format(''truetype'');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: ''DejaVu Sans'';
    src: url(''dejavu/DejaVuSans-Oblique.ttf''); 
    src: 
        local(''DejaVu Sans''),
        local(''DejaVu-Sans''),
        url(''dejavu/DejaVuSans-Oblique.ttf'') 
        format(''truetype'');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: ''DejaVu Sans'';
    src: url(''dejavu/DejaVuSans-BoldOblique.ttf''); 
    src: 
        local(''DejaVu Sans''),
        local(''DejaVu-Sans''),
        url(''dejavu/DejaVuSans-BoldOblique.ttf'') 
        format(''truetype'');
    font-weight: bold;
    font-style: italic;
}