css - teclado - medidas web responsive 2018
La fuente no se muestra hasta que el tamaño de la ventana en Chrome (6)
Chrome utiliza el archivo .svg en el @font-face kit , y no debe llamarse al último. Intenta reorganizar tu código así:
@font-face {
font-family: ''bpmonoregular'';
url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular'') format(''svg''),
url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff'') format(''woff''),
url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf'') format(''truetype''),
src: url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot'');
src: url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix'') format(''embedded-opentype'');
font-weight: normal;
font-style: normal;
}
Coloque el url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular'') format(''svg'') en la primera línea.
La solución principal se encontró aquí en este sitio web: Font Face Rendering en Chrome
Estoy usando angular2 y webpack. Cargando mi fuente así:
@font-face {
font-family: ''bpmonoregular'';
src: url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot'');
src: url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.eot?#iefix'') format(''embedded-opentype''),
url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.woff'') format(''woff''),
url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.ttf'') format(''truetype''),
url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular'') format(''svg'');
font-weight: normal;
font-style: normal;
}
Si en mi CSS aumento el porcentaje del tamaño de letra, la fuente no se mostrará a menos que sea el primer componente cargado. Tan pronto como cambio de página, desaparece. Sin embargo, si cambio el tamaño de la ventana, aparecerá.
Esto solo sucede en Chrome
Intenta convertir tu fuente como .woff e impórtala como:
@font-face {
font-family: "FontName";
font-weight: normal;
font-style: normal;
src: url("/persist/fonts/FontName.woff") format("woff");
}
Intenta dirigirte a navegadores webkit para cargar la fuente solo desde la fuente svg
@media screen and (-webkit-min-device-pixel-ratio:0) {
@font-face {
font-family: ‘bpmonoregular’;
src: url(''assets/fonts/bpmono_regular_macroman/BPmono-webfont.svg#bpmonoregular'') format(‘svg’);
}
}
Intenta usarlo sin
font-weight: normal;
font-style: normal;
Intente cargar font-face usando CSS estático (etiqueta de estilo o enlace) en lugar de estilos de componentes.
Puede intentar disparar una ventana. Resize con el código en document.ready como una solución temporal.