@font face在Chrome中无法呈现正确的字体系列

@font-face not rendering correct font-family in Chrome

本文关键字：系列 字体 face Chrome @font      更新时间：2023-09-26

我有一个包含字体列表的下拉列表。我可以在Firefox上正确显示它们。。但当我打开Chrome时，效果不会被应用。

CSS——

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

Dropdownlist Change功能是

$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上看到了这些变化。。但只有当我第二次点击下拉框中的字体时，这种变化才会反映出来。这不会发生在第一次点击下拉列表中的字体时。

感谢

如果字体有其他不同的格式（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;

如果您没有这种格式，请在此处下载并转换她的

@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。。如果这是有效的，那么很好，否则你可以选择。。字体生成器。你可以在这里选择字体，你可以得到字体的网页工具包。

http://convertfonts.com/

http://everythingfonts.com/font-face

相关文章：