自定义@ font-face不加载在铬（铬自定义字体不呈现） [英] custom @font-face does not load in chrome (chrome custom fonts not rendering)

问题描述

自定义 @ font-face 无法在chrome中加载（chrome自定义字体无法呈现）使用CSS自定义字体

  @ font-face {
 font-family：'gotham-rounded-medium'; 
 src：url（'fonts / gothumrounded_medium / gotham-rounded-medium.eot'）; 
 src：url（'fonts / gothumrounded_medium / gotham-rounded-medium.eot？#iefix'）format（embedded-opentype），
 url（'fonts / gothumrounded_medium / gotham-rounded-medium （'fonts / gothumrounded_medium / gotham-rounded-medium.ttf'）格式（truetype），
 url（'fonts / gothumrounded_medium / gotham -rounded-medium.svg'）格式（ SVG）; 
 font-weight：400; 
 font-style：normal 
} 
 
 .custom_font {
 font-family：'gotham-rounded-medium'，arial，sans-serif; 
} 
  

只有当您调整屏幕窗口大小时才显示文本。

这样做是为了解决这个问题吗？

由不同的Angular 2模块制成的面。请参阅：

https://bugs.chromium.org/p/chromium/issues/detail?id=582198#c20

custom @font-face does not load in chrome(chrome custom fonts not rendering) Using custom fonts using CSS

@font-face {
    font-family:'gotham-rounded-medium';
    src:url('fonts/gothumrounded_medium/gotham-rounded-medium.eot');
    src:url('fonts/gothumrounded_medium/gotham-rounded-medium.eot?#iefix')format("embedded-opentype"),
        url('fonts/gothumrounded_medium/gotham-rounded-medium.woff')format("woff"),
        url('fonts/gothumrounded_medium/gotham-rounded-medium.ttf')format("truetype"),
        url('fonts/gothumrounded_medium/gotham-rounded-medium.svg')format("svg");
    font-weight:400;
    font-style:normal
}

.custom_font{
   font-family:'gotham-rounded-medium', arial, sans-serif;
}

The texts are showing only when you resize the screen window.

So please is there something that it can be done to solve this issue?

解决方案

In my case the problem was connected with multiple inclusion of the same @font-face made by different Angular 2 modules. Please see:

https://bugs.chromium.org/p/chromium/issues/detail?id=582198#c20

这篇关于自定义@ font-face不加载在铬（铬自定义字体不呈现）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！