css - google - font face otf

@ font-face svg no funciona correctamente en Chrome?

Question

Tengo un problema con una fuente específica y la forma en que se representa en Chrome.

Firefox muestra la fuente correctamente debido al uso de ttf.

Chrome no usa antialias y la fuente es demasiado ''nítida'' y fea.

Esta es la declaración css que utilicé.

@font-face {
    font-family: ''HelveticaNeueLT Std Thin'';
    src: url(../fonts/h2.eot);
    src: url(../fonts/h2.svg#test) format(''svg''),
         url(../fonts/h2.woff) format(''woff''),
         url(../fonts/h2.ttf) format(''truetype'');
font-weight: normal;
font-style: normal;
}

Llegué a la conclusión de que el problema está en el archivo svg statement / font. Si no uso la etiqueta hash en absoluto y la dejo solo como .svg, se muestra suavizado pero a una altura de línea diferente, con una posición ligeramente fuera de lugar. Si agrego .svg # algo, no lo antialias y se ve feo.

Cualquier sugerencia es bienvenida para ayudarme a solucionar este problema bastante molesto.

PD: Windows Antialiasing está bien, he probado esto. También probé la @media screen and (-webkit-min-device-pixel-ratio:0) para la fuente svg, sin éxito. Me doy cuenta de que esto puede ser un repost, pero después de haber probado todas las soluciones de las preguntas relacionadas, estoy un poco desesperado.

Answer 1

Al hacer referencia a los archivos SVG en @ font-face, el ID (#) en la ruta de archivo está especificando el elemento dentro del archivo .svg. Para encontrar el id. Correcto, puede abrirlo en un editor e inspeccionar la etiqueta <font> ulus.

Por ejemplo:

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

se relaciona con:

<font id="latobold" horiz-adv-x="1187" >

Answer 2

Como Lily y la ardilla tipográfica sugieren, su fuente SVG casi siempre debe estar al final de su lista de @font-face de @font-face . No desea que un navegador use una fuente SVG a menos que no pueda usar otra cosa.

La razón de esto es que las fuentes SVG son muy poco compatibles , y el soporte está disminuyendo. A partir de este post (2015), las fuentes SVG ya no son compatibles con Chrome (38) y solo son compatibles con Safari 8, iOS Safari 8.1 y el navegador de Android 37. http://caniuse.com/#feat=svg-fonts

Edición: a partir de febrero de 2016, el navegador de Android 47 ya no admite fuentes SVG. Safari y iOS Safari aún los admite, y parece que son los únicos navegadores que lo hacen.

Answer 3

Para hacer que las fuentes web se procesen con buenos antialias en Chrome en Windows, debe usar este formato en la declaración de la fuente:

@font-face {
    font-family: ''Futura'';
    src: url(''futura.eot'');
    src: url(''futura.eot?#iefix'') format(''embedded-opentype''),
         url(''futura.woff'') format(''woff''),
         url(''futura.ttf'') format(''truetype''),
         url(''futura.svg#futura'') format(''svg'');

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: ''Futura'';
        src: url(''futura.svg#futura'') format(''svg'');
    }
}

Básicamente, debes obligar a Chrome a usar el formato de fuente SVG. Puede hacer esto moviendo la url para la versión .svg a la parte superior, sin embargo, Chrome en Windows ha tenido problemas para desordenar el diseño al hacer esto (hasta la versión 30 incluida). Al anular la declaración de fuente utilizando una consulta de medios, estos problemas se resuelven.

Además: a veces, la posición de línea base no coincide entre las fuentes OpenType y las fuentes SVG, pero puede ajustar esto simplemente editando los archivos de fuentes SVG. Las fuentes SVG están basadas en XML y si miras la declaración

<font-face units-per-em="2048" ascent="1900" descent="-510" />

Puede cambiar el valor de ascenso y hacer que coincida con las otras versiones de formato de fuente.

Answer 4

prueba esta implementación @ font-face

@font-face {
    font-family: ''OpenSans'';
    src: url(''fonts/OpenSans-Regular-webfont.eot'');
    src: url(''fonts/OpenSans-Regular-webfont.eot?#iefix'') format(''embedded-opentype''),
         url(''fonts/OpenSans-Regular-webfont.woff'') format(''woff''),
         url(''fonts/OpenSans-Regular-webfont.ttf'') format(''truetype''),
         url(''fonts/OpenSans-Regular-webfont.svg#open_sansregular'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

h1 {
  font-family: ''OpenSans'';
  font-weight: 300%;
}

Para obtener más información, consulte este ejemplo https://github.com/ttibensky/BulletProof-font-face-implementation

Answer 5

fontsquirrel.com/tools/webfont-generator organiza su @font-face CSS de esta manera:

@font-face {
    font-family: ''HelveticaNeueLT Std Thin'';
    src: url(''../fonts/h2.eot'');
    src: url(''../fonts/h2.eot?#iefix'') format(''embedded-opentype''),
         url(''../fonts/h2.woff'') format(''woff''),
         url(''../fonts/h2.ttf'') format(''truetype''),
         url(''../fonts/h2.svg#h2'') format(''svg'');
    font-weight: normal;
    font-style: normal;
}

Más información sobre por qué el pedido es importante aquí: http://paulirish.com/2009/bulletproof-font-face-implementation-syntax/

Si aún le causa problemas, intente usar el generador mencionado anteriormente, elija la opción EXPERTAR y juegue con las diferentes configuraciones (especialmente en Rendering y X-height).