css - tipografias - tipografia de google

Cómo combinar fuentes?

Question

Tengo varias fuentes,

• OpenSans-bold.ttf
• OpenSans-boldItalic.ttf
• OpenSans-extrabold.ttf
• OpenSans-italic.ttf
• OpenSans-light.ttf

¿Cómo voy a crear un solo archivo, como opuesto a tantos archivos diferentes? ¿Y quizás los use en CSS como lo haría normalmente, o como lo haría en Photoshop?

p.ej

small{font-family:"OpenSans"; font-weight: normal;}
strong{font-family:"OpenSans"; font-weight: bold;}
h2 {font-family:"OpenSans"; font-weight: bolder;}

Cualquier ayuda será apreciada.

Answer 1

Necesita los diferentes archivos de fuentes si desea utilizar diferentes tipos de letra (regular, cursiva, negrita, etc.), porque cada tipo de letra se implementa como un archivo de fuente separado (de hecho, incluso lo necesita en diferentes formatos de fuente, para cubrir diferentes navegadores )

Pero puede usarlos como una sola familia de fuentes, al igual que usa, digamos, solo Arial y aplica cursiva y negrita, usando CSS directa o indirectamente (a través de HTML, por ejemplo, los elementos h2 son negritas por defecto). Para esto, necesita declarar una familia de fuentes.

Por ejemplo, FontSquirrel genera código CSS que define cada tipo de letra como una familia de fuentes. Esto es posible, pero ilógico e inconveniente. Por ejemplo, genera

@font-face {
    font-family: ''open_sansbold'';
    src: url(''opensans-bold-webfont.eot'');
    src: url(''opensans-bold-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''opensans-bold-webfont.woff'') format(''woff''),
         url(''opensans-bold-webfont.ttf'') format(''truetype''),
         url(''opensans-bold-webfont.svg#open_sansbold'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

Para hacer las cosas más lógicas, cambie el valor del font-weight la font-weight y cambie el nombre de la font-family la font-family uno que use en diferentes reglas @font-face (para los diferentes tipos de letra de la familia). P.ej,

@font-face {
    font-family: ''Open Sans'';
    src: url(''opensans-bold-webfont.eot'');
    src: url(''opensans-bold-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''opensans-bold-webfont.woff'') format(''woff''),
         url(''opensans-bold-webfont.ttf'') format(''truetype''),
         url(''opensans-bold-webfont.svg#open_sansbold'') format(''svg'');
    font-weight: bold;
    font-style: normal;
}

Answer 2

Una manera fácil de combinar varias fuentes en un archivo es codificarlas en base64 e incrustarlas en CSS. Sin embargo, seguirán siendo fuentes diferentes y el tamaño total aumentará. Existen varias herramientas en línea que pueden crear el CSS para archivos de fuentes que cargue, como este .