"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo incluir fuentes personalizadas usando .ttf y garantizar la compatibilidad entre navegadores?

¿Cómo incluir fuentes personalizadas usando .ttf y garantizar la compatibilidad entre navegadores?

Publicado el 2024-11-11
Navegar:663

How to Include Custom Fonts Using .ttf and Ensure Cross-Browser Compatibility?

Inclusión de fuentes personalizadas usando .ttf y CSS

Quiere incorporar una fuente .ttf a su página web, pero encuentra dificultades. Examinemos su código:

@font-face {
    font-family: 'oswald';
    src: url('/font/oswald.regular.ttf');
}

¿Dónde está el problema?

Incluir solo un archivo .ttf no es suficiente para la compatibilidad entre navegadores. Para cubrir una amplia gama de navegadores, necesita varios formatos de fuente.

Solución integral:

@font-face {
    font-family: 'MyWebFont';
    src: url('webfont.eot'); /* IE9 Compat Modes */
    src: url('webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
         url('webfont.woff') format('woff'), /* Modern Browsers */
         url('webfont.ttf')  format('truetype'), /* Safari, Android, iOS */
         url('webfont.svg#svgFontName') format('svg'); /* Legacy iOS */
}

Este código supone que tienes los formatos .eot, .woff, .ttf y SVG para tu fuente web. Los generadores de fuentes web como Font Squirrel o Transfonter pueden automatizar este proceso.

Enfoque moderno:

Los navegadores modernos prefieren las fuentes .woff, por lo que también puedes simplificar tu código:

@font-face {
    font-family: 'MyWebFont';
    src: url('myfont.woff') format('woff'), /* Chrome 6 , Firefox 3.6 , IE 9 , Safari 5.1  */
         url('myfont.ttf') format('truetype'); /* Chrome 4 , Firefox 3.5, Opera 10 , Safari 3—5 */
}

Recursos adicionales:

  • Trucos de CSS: uso de @font-face: https://css-tricks.com/snippets/css/using- font-face/
  • ¿Puedo usar fontface: https://caniuse.com/fontface
Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3