Question

我有一个包含字体列表的下拉列表。我可以在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上反映的更改..但只有当我第二次点击下拉列表中的字体时才会反映出这种变化。从下拉列表中第一次单击字体时不会发生这种情况。

谢谢

Answer 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

Answer 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

@ font-face无法在Chrome中呈现正确的font-family

2 个答案: