遇到问题了：浏览器怎么设置字体看网页爽

一些网页使用 Hiragino Sans （冬青黑）这个字体，英文数字都太宽，想改设置用自定义字体吧，有些网站用 Material Icons ，我的自定义字体就会导致这些符号出不来。

V2EX 大神多，求一个优雅的解决方案。

说明：
1. 环境是 macOS 最新版，Firefox 最新版。用 Safari 问题相同。
2. 太多年没写网页了，时代变了，也不知道 Material Icons 是个啥，感觉像 SF Symbols 。
3. 曾经因为 Hiragino 字体花了几千日元买了 macOS 雪豹，因为之前的常州华文黑体更丑。但是现在有了苹方、思源黑等，回头再看冬青黑的英数就过宽了。

wu67

2022-12-04 18:04:23 +08:00

一般是非衬线设置苹方或者是冬青黑, 衬线随缘, 等宽用 menlo.

我也比较喜欢冬青黑和苹方, 不过后者比前者细一点. 思源还是适合 ubuntu 那套 ui 多一点, 第一次接触 ubuntu 时看到 GUI 那个字体渲染, 真的是非常有视觉冲击力.

但目前网页浏览, 还是需要一个全局样式 -webkit-font-smoothing: auto; . 因为绝大部分 css/ui 框架, 都默认设置了字体平滑, 这使得网页字体变得更细了, Mac 上的网页渲染也在向 window 那种渲染结果靠近, 简直有毛病, 不知道那些开发者和美工怎么想的.

TrembleBeforeMe

2022-12-04 18:39:38 +08:00

https://greasyfork.org/zh-CN/scripts/439505-%E5%85%A8%E5%B1%80%E9%B8%BF%E8%92%99%E9%BB%91%E4%BD%93

jsxhhyf

2022-12-04 18:56:48 +08:00

试试这个脚本
https://greasyfork.org/zh-CN/scripts/416688-%E5%AD%97%E4%BD%93%E6%B8%B2%E6%9F%93-%E8%87%AA%E7%94%A8%E8%84%9A%E6%9C%AC

nuevepicos

2022-12-04 18:57:34 +08:00

Firefox 用扩展 Stylish 或 Stylus
Safari 用扩展 Cascadea

对所有网页 /域名启用如下类似的本地 CSS （我都是中文替换成苹方）：

*里面替换的内容可以按需调节
*用 font-face 的话，基本不会把用字符图标的网页弄乱
*当然，部分网站用这个 css 是不能替换字体设置的，那就需要找到这些网站的 css 字体设置，但单独建立条目来重定义了，很多都是 body/html 来定义的，还有一些会到更具体的 class 条目。

-----------------------------css----------------------------------

/* Latin */
@font-face {font-family: "Tahoma"; src: local("SF UI Display");}
@font-face {font-family: "Courier"; src: local("Menlo");}
@font-face {font-family: "Courier New"; src: local("Menlo");}

/* 中文 (简体) */
@font-face {font-family: "SimSun"; src: local("PingFang SC");}
@font-face {font-family: "宋体"; src: local("PingFang SC");}
@font-face {font-family: "NSimSun"; src: local("PingFang SC");}
@font-face {font-family: "新宋体"; src: local("PingFang SC");}
@font-face {font-family: "SimHei"; src: local("PingFang SC");}
@font-face {font-family: "黑体"; src: local("PingFang SC");}
@font-face {font-family: "Hei"; src: local("PingFang SC");}
@font-face {font-family: "Heiti SC"; src: local("PingFang SC");}
@font-face {font-family: "STSong"; src: local("PingFang SC");}
@font-face {font-family: "STHeiti SC"; src: local("PingFang SC");}
@font-face {font-family: "Lantinghei SC"; src: local("PingFang SC");}
@font-face {font-family: "STHeiti"; src: local("PingFang SC");}
@font-face {font-family: "Microsoft YaHei"; src: local("PingFang SC");}
@font-face {font-family: "microsoft yahei"; src: local("PingFang SC");}
@font-face {font-family: "微软雅黑"; src: local("PingFang SC");}
@font-face {font-family: "Hiragino Sans GB"; src: local("PingFang SC");}
@font-face {font-family: "WenQuanYi Micro Hei"; src: local("PingFang SC");}
@font-face {font-family: "文泉驿微米黑"; src: local("PingFang SC");}
@font-face {font-family: "Lantinghei SC"; src: local("PingFang SC");}

/* 中文 (繁體) */
@font-face {font-family: "MingLiU"; src: local("PingFang TC");}
@font-face {font-family: "MingLiU-ExtB"; src: local("PingFang TC");}
@font-face {font-family: "MingLiU_HKSCS"; src: local("PingFang TC");}
@font-face {font-family: "MingLiU_HKSCS-ExtB"; src: local("PingFang TC");}
@font-face {font-family: "PMingLiU"; src: local("PingFang TC");}
@font-face {font-family: "PMingLiU-ExtB"; src: local("PingFang TC");}
@font-face {font-family: "STHeiti TC"; src: local("PingFang TC");}
@font-face {font-family: "Heiti TC"; src: local("PingFang TC");}
@font-face {font-family: "Microsoft JhengHei"; src: local("PingFang TC");}

blacko

2022-12-04 20:52:54 +08:00

@nuevepicos 感谢指点！
在看到回复之前，我正好也在用 Safari 搭配网上搜到的 @font-face ，看到了一些效果。但因为拷贝粘贴的代码较多，不知道具体哪里生效，哪里报错。
看到阁下的示范之后，我确认了之前的推测：前面的 font family 就是网页定义的字体，后面的 src local 就是我们期待用来替换它的本地字体。

然后我又遇到了新问题！
在某些网页（比如： https://blog.livedoor.com/），我替换后的字体，粗体时变成了横向移动变粗，相当难看，替换前是正常粗体。
替换前是：Hiragino Kaku Gothic ProN ，有 W3 和 W6 两种字重。想必它的粗体自动启用了 W6 。
替换后是：PingFang TC ，有 6 种字重，但它用 Regular 横向移动生成粗体，没有调用 PingFang 的粗体。

@font-face {
font-family: "Hiragino Kaku Gothic ProN";
src: local("PingFang TC");
}

1.要根据各种字重一条条写替换吗？感觉某些网站似乎又能自动识别，而且替换后的字体粗体效果更好，比如 kakaku.com 。替换前像是横向移动加粗。
2.font-family 那行能不能写多个字体，用逗号分隔，我试过，感觉没有分开写效果好，不知道哪里出错
3.字体的名字不知道用哪个，感觉不同语言下字体名称会不同，比如上面可能会变成：蘋方-繁，又有 PostScript 名字，比如 PingFangTC-Regular ，不清楚 CSS 用哪个。

另外几个宝宝也谢谢，似乎没说到点子上，微软雅黑和鸿蒙又都是我讨厌的……