@font-face 未在 Chrome 中呈现正确的字体系列

Posted 2023-03-15

【中文标题】@font-face 未在 Chrome 中呈现正确的字体系列

【英文标题】：@font-face not rendering correct font-family in Chrome

【发布时间】：2014-11-10 05:58:28

【问题描述】：

我有一个包含字体列表的下拉列表。我能够在 Firefox 上正确显示它们.. 但是当我转向 Chrome 时，效果不适用。

CSS --

@font-face

    font-family: Comic Sans MS !important;
    src: url('../fonts/Comic Sans MS Regular/comic.ttf');

下拉列表更改功能是

$fontsDropdown = $('.custom-text-font').find('.fpd-fonts-dropdown').change(function() 
                    if (currentElement != null)
                    
                        currentElement.setFontFamily(this.value);
                        currentElement.params.font = this.value;
                        //changed text to bold
                        currentElement.setFontStyle('bold');
                        currentElement.params.fontStyle = 'bold';

                        _outOfContainment(currentElement);
                        stage.renderAll();
                    
            )

这会在 firefox ,,, 上产生正确的输出，但在 Chrome 上会产生正确的输出。,, 它不会。实际上，我得到了 Chrome 上反映的更改 .. 但只有当我第二次单击下拉菜单中的字体时，才会反映该更改。第一次单击下拉列表中的字体时不会发生这种情况。

谢谢

【问题讨论】：

字体需要针对不同的浏览器进行不同的声明。见***.com/questions/4051826/…

有时不允许跨域：***.com/questions/9641427/….

【参考方案1】：

@font-face

    font-family: Comic Sans MS !important;
    src: url('../fonts/Comic Sans MS Regular/comic.ttf');

对于这个问题。 首先删除空格 b/w 文件夹名称，例如将另一个名称替换为 Comic Sans MS Regular。 对于字体系列，您可以选择除font-family: Comic Sans MS !important; 之外的其他名称 并为此删除!important.. 如果这有效，那么很好，否则你可以选择.. 字体生成器。 你可以在这里选择字体，你可以得到font-face web kit。

http://convertfonts.com/

http://everythingfonts.com/font-face

【参考方案2】：

如果字体有其他不同的格式(woff,ttf,svg,otf) .我建议用以下方式兼容编写所有跨浏览器

 src: url("DejaWeb-Bol.eot") format('embedded-opentype'), 
 url('DejaWeb-Bol.woff') format('woff'),
 url('DejaWeb-Bol.ttf') format('truetype'),
 url('DejaWeb-Bolsvg#') format('svg');
 font-weight:bold;
font-style:normal;

如果你没有这种格式download here 和convert her