google-chrome - figcaption - html spec

Chrome svg-Font-Rendering breaks Layout

Question

Actualmente estoy trabajando en un pequeño proyecto en el que me gustaría usar webfonts a través de @fontface .

Implementé la fuente así:

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

Ahora, como probablemente haya experimentado, Chrome tiene problemas para mostrar estas fuentes de una manera fluida.

Después de buscar, encontré una solución que parece funcionar: simplemente mueves esta parte del CSS:

    url(''../fonts/Cardo104s-webfont.svg#CardoRegular'') format(''svg'');

Entonces terminas con esto:

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

Ahora Chrome procesa las fuentes de una manera fluida, lo cual es genial.

PERO:

Por alguna razón, A VECES este rompe el Diseño. Aproximadamente cada tercera vez que cargo la página obtendré algo como esto:

Todo se mueve hacia la izquierda Los textos más largos están saliendo de sus contenedores. Se ve realmente extraño.

** ¿Alguien ha experimentado este problema antes?

Me gustaría recibir consejos sobre esto. **

No dude en echar un vistazo: Vea Fireflycovers.com en línea

¡Muchas gracias!

Answer 1

La solución está en la duplicación de la regla @font-face .

No necesariamente lo necesita en una consulta de medios en la respuesta de Quka, aunque es una buena forma de orientar solo navegadores webkit.

Si duplica su declaración de @font-face exactamente como (svg primero para una mejor representación) y la pega debajo del original, los problemas de diseño / dibujo funky desaparecieron.

Simplemente diciendo que la consulta de los medios no es importante aquí: es la regla duplicada. Este es un error tan extraño. Tan tonto.

Answer 2

He tenido este problema exacto en un sitio web propio.

En lugar de colocar el svg en la parte superior, conserve el formato original pero agregue una consulta de medios como se muestra a continuación. Esto hará que Chrome represente perfectamente las fuentes y solucione el rompimiento del diseño.

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

@media screen and (-webkit-min-device-pixel-ratio:0) {
    @font-face {
        font-family: ''CardoRegular'';
        src: url(''../fonts/Cardo104s-webfont.svg#CardoRegular'') format(''svg'');

    }
}

Answer 3

He visto los mismos problemas (o peores) en algunos sitios. La mayoría de las veces el texto se rompe junto a sí mismo.

Mi única solución en el punto es volver a la fuente anterior. También puede intentar agregar la regla de CSS: -webkit-font-smoothing: antialiased; para una pequeña mejora.