一行CSS实现全站中文简繁转换

这篇文章发布于 2021年01月27日,星期三,01:52,归类于 CSS相关。 阅读 14357 次, 今日 1 次 17 条评论

 

雪景占位

一、不BB,直接解密

就是这么一行CSS:

font-variant-east-asian: traditional;

表示当前文字使用繁体变体。

再加粗显示一下:

font-variant-east-asian: traditional;

例如:

body {
    font-variant-east-asian: traditional;
}

就可以让整个页面的简体中文变成繁体。

截图效果示意:

繁体效果示意

二、需要字体支持-OS X和iOS有效

卧槽,CSS居然有这么炫酷的能力,那为何没几个人知道呢?

关键问题就在于这种效果需要字体本身包含繁体变体。

而在Windows系统中的几个默认字体都没有包含繁体变体,而OS X,也就是iMac或者 Mac Pro,以及iOS系统,也就是苹果手机,iPad等设备的默认中文字体是包含繁体变体的。

因此,目前,在没有任何外界干预的情况下,一行CSS让网站转变成繁体,只在OS X和iOS系统中有效。

如果您访问本文的正好就是使用这些操作系统的设备,可以点击下面这个按钮,看看文章内容有没有1键变繁体:

windows系统与苹方字体

windows系统中其实是有些字体包含繁体特征的,可惜是日文字体,例如Windows系统内置的”Yu Gothic”(游黑體日)字体,但是,能够转换的也仅仅是日语中的部分汉字。

什么微软雅黑、华文字体,各种宋体楷体全部都没有繁体特征。

Android设备的默认中文字体也没有繁体变体,因此,Android设备下font-variant-east-asian:traditional也是看不到效果的。

苹方字体

好在有一个比较知名的中文字体是包含繁体变体的,这个字体就是“苹方字体”,Apple公司目前很多系统的默认中文字体。

因此,如果Windows用户安装了苹方字体,也是可以一键变成繁体的。

例如我自己的Windows 10电脑就安装了苹方字体,只要设置字体是苹方,然后设置字体特征是繁体,就可以让简体中文变成繁体中文了:

body {
    font-family: 'PingFang SC';
    font-variant-east-asian: traditional;
}

如果大家足够细心,就会发现本博客右侧侧边栏(移动端则在文章评论的后面)新增了一个简繁体转换的功能,可以体验下瞬间简繁体转换的效果:

简繁体转换

如果没有,说明你的设备没有安装苹方字体,因为此简繁体转换功能提前判断了当前系统是否安装了PingFang SC字体才呈现的。

这个功能刚加的,这就叫学以致用,本身就是个增强的功能,可以让Mac系统,iPhone以及安装了苹方字体的Windows系统用户可以一键使用语言切换能力,关键成本极低,是非常划算的买卖。

三、变化的只是字形

传统的简体变繁体是通过改变文字本身字符内容实现的,例如起点中文网这里的繁体:

字符是繁体

而本文的font-variant-east-asian属性实现的繁体效果则原始的字符还是简体中文,只是视觉呈现的是繁体而已,如下图所示:

简体字符繁体效果示意

四、结语

如果可以让用户或者网站内置苹方字体,那么简繁体转换这个功能直接就可以大结局了。

不过,苹方字体的体积太大了,一个字重字体就10M,总共有7个字重,完整的苹方字体要70M。

APP内置这个字体?或者indexDB默默存下苹方字体?

其实,默默加载一个10M的东西也不是不可行。

做好存储即可,然后转繁体就一行CSS事情,这可比搞语言包进行切换什么的成本低多了。

尤其以后5G时代,几十M东西都是秒下。

说不定,后生之年会见证Web中各种中文字体版式横飞的场面。

哈哈哈~

好了,就说这么多,如果您觉得本文的内容还不错,欢迎分享,欢迎转发,比心感谢!

(本篇完)

分享到:


发表评论(目前17 条评论)

  1. toby说道:

    后来(後來)、皇后(皇后),理发后发财(理髮后發財),干部和干爹不相干(幹部和乾爹不相干)

  2. fredbrock说道:

    万恶得微信浏览器不支持

  3. 来分酸菜鱼说道:

    以前安装App的时候还会看一下安装包大小,现在很少看了。主要是机器和网络都进步了,这种切换方式值得期待。

  4. 沉舟侧畔说道:

    好像反过来不行,原来是繁体的,不能变成简体

  5. MO说道:

    东西虽好东西,但我不配,还是用的i18n方案吧,老板不会骂我~~

  6. 东风异客说道:

    本来是繁体的文字, 就算是苹方字体, 不能反过来变成简体.
    作为看繁体网页,转为简体的简单方案, 看来不行了

  7. 木子小四说道:

    而本文的font-variant-east-asian属性实现的繁体效果则原始的字符还是简体中文,只是视觉呈现的是繁体而已。
    请教这个是如何做到的呢?浏览器渲染层做了处理吗?

  8. shizhi说道:

    简体字将有些字进行了合并处理,比如乾燥(干)、 樹幹(干)、干(干)戈、北斗(斗)、戰鬥(鬥)、下面(面)、下麵(麵),这些字转换成繁体字后会出现错误。

  9. 仿生狮子说道:

    期待各种中文字体版式横飞的场面

  10. Kylin说道:

    兼容性如何?

  11. Xleine说道:

    但是有个问题是简体和繁体有的词语不一样吧

  12. Leon说道:

    在 macOS 實測,只有 Safari 不正常,僅變換到標題,Firefox 和 Chrome 都有全部變換,三個瀏覽器的字體設定都是預設值。