css - teclado - medidas web responsive 2018

La fuente no se muestra hasta que el tamaño de la ventana en Chrome

Question

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

Answer 1

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

Answer 2

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");
}

Answer 3

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’);
  }
}

En profundidad el artículo aquí

Answer 4

Intenta usarlo sin

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

Answer 5

Intente cargar font-face usando CSS estático (etiqueta de estilo o enlace) en lugar de estilos de componentes.

Answer 6

Puede intentar disparar una ventana. Resize con el código en document.ready como una solución temporal.