使用@font-face 覆盖默认字体

Question

我们想使用@font-face

修改HTML中的默认字体

@font-face {
    font-family: Times;
    font-style: normal;
    font-weight: 400;
    src: local('serif');
}

在上面的代码中，我们想将 Times 字体覆盖为衬线，但上面的代码不起作用，并且一直使用 Times 字体而不是衬线

Answer 1

试试这个例子，它对我有用 -- https://jsfiddle.net/gbk4rLw3/16/。但是，如果您尝试使用普通字体类型（如衬线或 sans-serif 切换字体，它似乎不起作用，但任何其他 web-safe 字体似乎都有效。

测试代码也在这里。

HTML

<div class="test">
TESTING
</div>

CSS

.test{
  font-family: Times;
}

@font-face {
    font-family: Times;
    font-style: normal;
    font-weight: 400;
    src: local("Impact"); /* Try replacing with Arial, Comic Sans MS, etc....*/
    }                          /*Doesn't seem to work with generic font types (serif,                                     sans-serif)*/

如果您想要衬线字体，请尝试使用 "Courier New"。

使用@font-face 覆盖默认字体

override default font using @font-face

css

fonts

font-face