引入ttf类型的字体不起作用的解决方法

前端引入一种后缀名为.ttf的字体,并在css文件中设置该字体,但是页面中并没有显示新引入的字体:

@font-face {
    font-family: 'myFont';
    src: url('./my-font.ttf') format('ttf');
    font-weight: 600;
    font-style: normal;
}

.my-font {
    font-family: 'myFont';
    color: red;
}

原因:后缀名为.ttf的字体的format()不是ttf,而是 truetype,改成如下就行了:

@font-face {
    font-family: 'myFont';
    src: url('./my-font.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
}

.my-font {
    font-family: 'myFont';
    color: red;
}
发布了69 篇原创文章 · 获赞 542 · 访问量 32万+

猜你喜欢

转载自blog.csdn.net/cc18868876837/article/details/103237075
今日推荐