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

2020-04-04 21:38:27 +08:00
 MajestySolor

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

@font-face
{
  font-family: "宋体";
  src: local("Source Han Sans SC");
}
3640 次点击
所在节点    前端开发
20 条回复
1KN6sAqR0a57no6s
2020-04-04 22:13:47 +08:00
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
噢,我知道你要干什么了,当我没说。(狗头)
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
提一点,宋体不一定是宋体,有可能是 simsun nsimsun,serif 。你看看实际渲染的字体究竟是哪个。
mxalbert1996
2020-04-05 01:50:57 +08:00
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
@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 厉害了大佬,终于解决办法了 大拇指👍

这是一个专为移动设备优化的页面(即为了让你能够在 Google 搜索结果里秒开这个页面),如果你希望参与 V2EX 社区的讨论,你可以继续到 V2EX 上打开本讨论主题的完整版本。

https://www.v2ex.com/t/659452

V2EX 是创意工作者们的社区,是一个分享自己正在做的有趣事物、交流想法,可以遇见新朋友甚至新机会的地方。

V2EX is a community of developers, designers and creative people.

© 2021 V2EX