Question

我正面临着brandley手写字体的问题，它在野生动物园中看起来很完美但是巨大的浏览器都有问题，所谓的mozilla和chrome。这是代码。

    @font-face {
    font-family: "BradleyHandITCBold";
    src: url(BradleyHandITCBold.ttf); 
    }
   .newfont
    { 
    font-family: 'BradleyHandITCBold';
    }

Answer 1

解决方案： mozilla和chrome只有问题，因为它的现代浏览器并不支持ttf字体，因此需要将TTF转换为WOFF或WOFF2。我使用TTF转换为WOFF转换器，它的工作非常完美。这是解码的代码。

 @font-face {
        font-family: 'BradleyHandITCBold';
        src: url("css/BradleyHandITCBold.ttf") format('truetype');
        src: url("css/BradleyHandITCBold.woff") format('woff');
        }
        .newfont
        { font-family: 'BradleyHandITCBold' !important;
        font-size : 31px;
        }

我发布这里是为了帮助其他开发者。感谢您的评论@ t.niese

Answer 2

也非常好的是你的字体有不同的字体权重：

@font-face {
    font-family: "DIN";
    src: url("/media/fonts/din-regular-webfont.eot");
    src: local('?'), url("/media/fonts/din-regular-webfont.woff") format('woff'), url("/media/fonts/din-regular-webfont.ttf") format('truetype'), url("/media/fonts/din-regular-webfont.svg#webfontfLFgafto") format('svg');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "DIN";
    src: url("/media/fonts/din-bold-webfont.eot");
    src: local('?'), url("/media/fonts/din-bold-webfont.woff") format('woff'), url("/media/fonts/din-bold-webfont.ttf") format('truetype'), url("/media/fonts/din-bold-webfont.svg#webfontfLFgafto") format('svg');
    font-weight: bold;
    font-style: normal;
}

并像这样使用它：

.bold-text {
    font-family: 'DIN', sans-serif;
    font-weight: bold;
}

.regular-text {
   font-family: 'DIN', sans-serif;
}

Bradley Hand ITCBold字体未显示在mozilla和chrome中

2 个答案: