html - para - fuentes personalizadas css

¿Cuál es la mejor manera de incluir fuentes personalizadas con CSS para que sea compatible con los navegadores máximos?

Question

He intentado varios códigos para incrustar una fuente personalizada y finalmente parece que funciona en FF & IE8 arriba. Pero no es compatible con IE7.

@font-face {
font-family: ''xyzfont'';
src: url(''fonts/abc-font.eot?'') format(''eot''), 
     url(''fonts/abc-font.woff'') format(''woff''), 
     url(''fonts/abc-font.ttf'') format(''truetype'');
}

h1, h2, h3, div span { font-family: ''xyzfont'', Georgia, Arial; }

Cualquier sugerencia para hacerlo más compatible (como IE7) más bienvenido.

Answer 1

yo uso este código;)

@font-face {
  font-family: ''BBadr'';
    src: url(''fonts/BBadr/BBadr.eot''); /* IE9 Compat Modes */
    src: url(''fonts/BBadr/BBadr.eot?#iefix'') format(''embedded-opentype''), /* IE6-IE8 */
      url("fonts/BBadr/BBadr.otf") format("opentype"), /* Open Type Font */
      url(''fonts/BBadr/BBadr.woff'') format(''woff''),/* Pretty Modern Browsers */
      url(''fonts/BBadr/BBadr.woff2'') format(''woff2''), /* Super Modern Browsers */
      url(''fonts/BBadr/BBadr.ttf'')  format(''truetype''),/* Safari, Android, iOS */
      url(''fonts/BBadr/BBadr.svg#BBadr'') format(''svg''); /* Legacy iOS */
}

puede convertir su fuente en línea (ttf) (con este sitio web: Conversor de fuentes Web en línea simple: ttf otf woff woff2 eot svg otf con css stylesheet

Convertir fuente y usar mi código css (no usar la muestra css del sitio)

Answer 2

Aquí está el css que uso para incrustar mi fuente en cada navegador, espero que ayude:

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

También tenga en cuenta que puede establecer su familia de fuentes sin comillas, como esta:

h1, h2, h3, div span { font-family: xyzfont, Georgia, Arial; }

Aquí puede obtener más información sobre el soporte del navegador de fuentes.

fontsquirrel es probablemente el mejor lugar para generar cada formato de fuente que necesites.

Este artículo explica cómo encontrar su ID de fuente para agregar después del hashtag para la fuente SVG.

Si alguien pregunta por qué hay ?#iefix para IE6-IE8 navegadores eot fuente, consulte esta respuesta .