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

【问题标题】：@font-face not rendering correct font-family in Chrome@font-face 未在 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 上反映的更改 .. 但只有当我第二次单击下拉菜单中的字体时，才会反映该更改。第一次单击下拉列表中的字体时不会发生这种情况。

谢谢

【问题讨论】：

字体需要针对不同的浏览器进行不同的声明。见stackoverflow.com/questions/4051826/…
有时不允许跨域：stackoverflow.com/questions/9641427/….

标签： javascript html css google-chrome fonts

【解决方案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

【讨论】：