用 @font-face 来替换网页字体为啥无效呢，有木有大佬知道？

V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

这是一个创建于 1694 天前的主题，其中的信息可能已经有所发展或是发生改变。

这样写为啥无效呢，有大佬知道嘛

@font-face
{
  font-family: "宋体";
  src: local("Source Han Sans SC");
}

大佬

无效

宋体

Sans

20 条回复 • 2020-06-29 15:07:32 +08:00

1KN6sAqR0a57no6s

2020-04-04 22:13:47 +08:00 via Android

src: local("Source Han Sans SC"); 的意思是加载用户电脑中安装好的 Source Han Sans SC，如果没装的话就不会生效。

还有 font-family: "宋体"; 这边写"宋体"会不会不太合适，因为大家都已经有了宋体，不知道重复定义会发生什么。换成"Siyuan"之类的会好一些。

正确的引入和使用方式大概是这样:
@font-face {
font-family: 'MyWebFont';
src: url('myfont.woff2') format('woff2'),
url('myfont.woff') format('woff');
}

body {
font-family: 'MyWebFont', sans-serif;
}

DOLLOR

2020-04-04 22:25:16 +08:00

多写几个别称，有的浏览器可能不认 Source Han Sans CN

@font-face{
font-family: "宋体";
src: local("Source Han Sans CN"),local("Source Han Sans CN Regular");
}

另外有的网站会指定雅黑，你可能需要把雅黑也覆盖掉
@font-face{
font-family: "microsoft yahei";
src: local("Source Han Sans CN"),local("Source Han Sans CN Regular");
}

1KN6sAqR0a57no6s

2020-04-04 22:25:27 +08:00 via Android

噢，我知道你要干什么了，当我没说。（狗头）

MajestySolor

2020-04-04 22:29:41 +08:00

@YuxiangLuo #1 感谢回复，你理解错了，我是想替换网页的字体
@DOLLOR #2 不是字体名的问题，而是这样写无效，但是我记得以前我在 firefox 上也这样干过是有效的，不知道是不是 chromium 自己的问题

DOLLOR

2020-04-04 22:33:04 +08:00

@MajestySolor
你一说我也发现了，chromium 家族的浏览器通过 @font-face 来替换字体，有一定概率会失效，得直接*{font-family: 字体名称了;}。

noe132

2020-04-04 23:31:06 +08:00 via Android

提一点，宋体不一定是宋体，有可能是 simsun nsimsun，serif 。你看看实际渲染的字体究竟是哪个。

mxalbert1996

2020-04-05 01:50:57 +08:00

有效啊
https://jsfiddle.net/mx_albert/cfe7mk3u/

MajestySolor

2020-04-05 21:19:43 +08:00

@mxalbert1996 #7 你是用什么浏览器有效？我这里 chromium 内核的都无效。

MajestySolor

2020-04-05 21:51:56 +08:00

https://codepen.io/Naushika/pen/ExjBwEy
各位可以测试一下，chromium 确实无效，好奇怪

mxalbert1996

2020-04-05 21:55:09 +08:00 via Android

@MajestySolor 这个 Dev Tools 看不出来是 Chrome 吗？我这样替换字体都用了多少年了。

mxalbert1996

2020-04-05 22:16:25 +08:00

顺便你那个链接我这里也没问题。

我建议你检查一下是不是你已经用了替换字体类的扩展导致冲突了。

MajestySolor

2020-04-05 22:58:15 +08:00

@mxalbert1996 #10 我表达错误，chrome 是正常的，只有 chromium 的 edge 无效 😄

mxalbert1996

2020-04-06 08:35:43 +08:00

@MajestySolor 我这里 Edge 也没问题。

JamesR

2020-06-02 13:51:59 +08:00

我也碰到这个问题了，捣鼓了一早上，谷歌浏览器本身问题，不识别你安装的字体，换别的浏览器（要清空缓存）正常。

TPOB

2020-06-07 16:39:53 +08:00

我也遇到这个问题了...可是我不想换浏览器（

TPOB

2020-06-07 22:27:35 +08:00

https://github.com/be5invis/Sarasa-Gothic/issues/115 我怀疑是这个问题，我用等线和雅黑都可以替换 @MajestySolor

MajestySolor

2020-06-07 22:38:51 +08:00

@TPOB #16 chromium edge 替换任何字体都无效，显然是浏览器自己的问题，同样的设置 Firefox 就一切正常

TPOB

2020-06-08 09:50:05 +08:00

@MajestySolor 我就是 chromium edge 呀，我换等线，雅黑，方正姚体，仿宋都可以，似乎是比较老的字体都行，新的都不行。可是我还是比较想用 sarasa 。。。

moliyumi

2020-06-29 13:34:41 +08:00

我也遇见这个问题了，解决方法：

进 chrome://flags/ 搜 font，把（ Match @font-face { src: local(<name>) } names by PostScript and full font name ）这个 disabled 掉

我不知道这么做会不会有安全风险，请慎重

MajestySolor

2020-06-29 15:07:32 +08:00

@moliyumi #19 厉害了大佬，终于解决办法了大拇指👍