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

前端字体自适应

  •  
  •   joker2026 · 43 天前 · 3013 次点击
    这是一个创建于 43 天前的主题,其中的信息可能已经有所发展或是发生改变。

    我想请教个问题,在做响应式页面的时候,字体的响应式要如何处理,才能最优。我现在使用过的几种办法

    1 、直接 px 然后媒体查询,这个肯定不是最优,第一是代码太多,每个断点都得单独写代码,而且你不可能完全适配到的所有设备

    2 、rem ,其实和 px 差不多,也是根据媒体查询不断的去调整根节点的字体大小,来达到 rem 的大小变化。问题同 1

    3 、使用 vw ,这是我觉得最丝滑的效果,配合 postcss-px-to-viewport ,非常好。但是它存在一个问题就是他完全是按照屏幕大小比例在缩小,就会导致文字会非常小,难以观看,当然可以使用 clamp 去设置字体最小值,但是每一个字体大小都这样设置,不仅没有提高效率,反而降低。

    所以综上所述,各位常用的最丝滑的响应式方案,尤其是针对字体,有哪些建议呢? 感谢

    26 条回复    2024-06-01 11:33:16 +08:00
    lisongeee
        1
    lisongeee  
       43 天前
    字体可以使用一套 css 主题变量吗?不同的地方用不同的变量,然后媒体查询更改变量值就行
    xxmym
        2
    xxmym  
       43 天前
    rem 更接近 vw ,极少数设备会因为非整数 px 有渲染问题。
    要看你这个响应式指的是什么,只是单纯适配手机竖屏浏览的话只用 rem 或 vw 就可以。
    横竖屏切换要考虑取短边,桌面移动响应就要加上媒体查询,不过这两种情况字号都好说,解决布局更重要
    facebook47
        3
    facebook47  
       43 天前 via Android
    所以用 css 通过不同分辨率去控制,随着布局改变
    codder
        4
    codder  
       43 天前
    用媒体查询,pc 设备和平板直接用 px ,到了手机确定一个合适的宽度设置好 vw ,其余尺寸就自动根据 vw 来适应了
    150530
        5
    150530  
       43 天前
    @codder pc 和平板字体大小使用 16px 转 rem ,手机端使用媒体查询设置 html 的文字大小为 vw ,是这样吗
    wu67
        6
    wu67  
       43 天前
    你用 rem 为什么还要媒体查询?
    就不能写 js 监听窗口大小 resize 然后节流设置 html 的 font-size 吗...
    Seria
        7
    Seria  
       43 天前
    不要用 vw 不要用 vw 不要用 vw
    重要的事情说三遍,这是一种极为危险的单位。

    建议使用 rem ,PC 、PAD 、MOBILE 分别设置不同的根节点大小。
    ColdBird
        8
    ColdBird  
       43 天前
    移动端用 rem ,然后 font-size 跟 vw 做一个比例转换保证 1rem=10px 即可
    pc 端通过媒体查询修改 px
    encro
        9
    encro  
       42 天前
    小程序解决的方案就是 rem 。
    相信他就是当前最好的方案。
    encro
        10
    encro  
       42 天前
    @encro #9 小程序是 rpx ,我说错了。
    idealist
        11
    idealist  
       42 天前
    @Seria 请教一下,为什么 vw 很危险呢?
    Seria
        12
    Seria  
       42 天前
    @idealist 因为是按宽度比例来计算的,容易不可控。
    shunia
        13
    shunia  
       42 天前   ❤️ 3
    字体大小应该是断点式的缩放,而不是完全平滑的缩放。这是设计上的基础。

    也就是说字体大小天然应该用媒体查询。基于这一点考虑,就可以知道 px 或者 rem 根本不重要。

    为了使用方便可以使用 css 变量,根据设计系统需要,在根样式文件里预定义不同断点下的合适的字体尺寸,在应用的组件上选取不同的尺寸即可。某些例外的情况可以使用基础尺寸做 scale 。
    shunia
        14
    shunia  
       42 天前   ❤️ 1
    另外也可以参考一些比较有名的设计类产品或者网站他们的样式实现方式,照搬一种也是可以的。不用自己费心去考虑这些,现成的东西太多。

    设计类的比如 Adobe ,Figma 。产品类的比如 Github ,Reddit 。
    tsutomu
        15
    tsutomu  
       42 天前 via Android
    其实 px 就是最优的,设计规范搞好就行,其实也不难,其他的不叫响应式布局。
    koor
        16
    koor  
       42 天前
    同意 13 楼 @shunia ,用大屏幕就是为了多看几行字,字体等比缩放就失去了意义
    7gugu
        17
    7gugu  
       42 天前
    用 rem 就好了,在移动端上如果要禁用大字模式,可以固定写死一个 root font-size 来重置字体大小
    wdking
        18
    wdking  
       42 天前
    rem 就是最好的方案
    thinkershare
        19
    thinkershare  
       42 天前
    @Seria VW/VH 当然有它的用处,部分项目是非常适合,因为我压根不关心屏幕的尺寸,从 14 寸到 200 寸都是同一个布局,屏幕尺寸越大,内容也就越到。
    lizy0329
        20
    lizy0329  
       42 天前
    我听过最扯蛋的就是屏幕越大,字体不变,这样用户可以多看几行?! 貌似是阿里搞的

    字体跟着整个页面等比缩放即可,如 @shunia 所说,需要再断点

    目前 移动端 viewport 有这几种:
    1. 直接扯大,使用 px
    <meta name="viewport" content="width=750, user-scalable=no viewport-fit=cover">
    2. 使用 rem ,再动态调整 root fontsize
    3. 使用 vw

    当然 rem/vw 都是 postcss 自动计算的,代码写 px 即可
    frank553000
        21
    frank553000  
       42 天前
    https://css-tricks.com/snippets/css/fluid-typography/
    自己参考这个方案改的,用了很久,个人觉得是最适合自己的
    june4
        22
    june4  
       42 天前   ❤️ 1
    我听过最扯蛋的就是字体跟着整个页面等比缩放,不管屏幕大小看到的东西都 tm 完全一样,但可能变得傻大
    nomytwins
        23
    nomytwins  
       42 天前
    我们在 pad 横屏上同样遇到这个问题了,目前无解中。移动端只有这个难搞定
    crocoBaby
        24
    crocoBaby  
       42 天前 via iPhone
    建议用 vw 这个比较现代化的方案,对于上面那些字体太大和太小的问题可以通过媒体查询做 h5 和 pad 两个端,基本上可以解决这个问题
    shadowyue
        25
    shadowyue  
       42 天前
    老实说这个还挺麻烦的,目前我用的就是 rem 方案,根据屏幕尺寸做缩放。

    根据屏幕尺寸做断点的方案工作量会更多一点。
    FFFFourwood
        26
    FFFFourwood  
       41 天前
    这个我擅长
    你可以想一下
    如果是手机上 375px 宽 这个字用最小 12px 就 ok
    如果是 1080 的 pc 显示器、大概 24px 就 ok
    那就可以算下比例、
    相当于一个二元一次方程 ax + b = y
    假设字号是 y 、当前屏幕宽度是 x
    375a + b = 12
    1080a + b = 24

    解最终是 y = 0.017x + 5.62

    x 是宽度 所以 x=1.7vw + 5.6px

    font-size: calc( 1.7vw + 5.6px )

    基本大部分 case 写一次就够 或者 750/768/2k 按需再写一次媒体查询 基本就能覆盖 320px ~ 5k 所有设备分辨率覆盖了
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   2339 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 38ms · UTC 01:25 · PVG 09:25 · LAX 18:25 · JFK 21:25
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.