V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
blacko
V2EX  ›  macOS

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

  •  
  •   blacko · 2022-12-04 16:31:35 +08:00 · 2243 次点击
    这是一个创建于 727 天前的主题,其中的信息可能已经有所发展或是发生改变。
    一些网页使用 Hiragino Sans (冬青黑)这个字体,英文数字都太宽,想改设置用自定义字体吧,有些网站用 Material Icons ,我的自定义字体就会导致这些符号出不来。

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


    说明:
    1. 环境是 macOS 最新版,Firefox 最新版。用 Safari 问题相同。
    2. 太多年没写网页了,时代变了,也不知道 Material Icons 是个啥,感觉像 SF Symbols 。
    3. 曾经因为 Hiragino 字体花了几千日元买了 macOS 雪豹,因为之前的常州华文黑体更丑。但是现在有了苹方、思源黑等,回头再看冬青黑的英数就过宽了。
    wu67
        1
    wu67  
       2022-12-04 18:04:23 +08:00
    一般是非衬线设置苹方或者是冬青黑, 衬线随缘, 等宽用 menlo.

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

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


    另外几个宝宝也谢谢,似乎没说到点子上,微软雅黑和鸿蒙又都是我讨厌的……
    pangdun
        6
    pangdun  
       2022-12-05 14:34:38 +08:00
    我的 window 上的 chrome 设置的鸿蒙字体,感觉观感还不错
    kizunai
        7
    kizunai  
       2022-12-06 12:19:38 +08:00
    nuevepicos
        8
    nuevepicos  
       2022-12-08 08:23:41 +08:00
    @blacko 你说的这个问题,我还真是没怎么研究。

    对于伪粗体的问题以前没在意过。我去搜了一下,好像 Safari 浏览器 webkit 内核字体渲染确实会有这个问题,在字重 600/700 的时候会触发。我搜索到这个文章,你可以参考一下,可以给对应网站增加相关 css 来修复。

    https://zhuanlan.zhihu.com/p/31047992
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2630 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 23ms · UTC 07:20 · PVG 15:20 · LAX 23:20 · JFK 02:20
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.