⼀⾏CSS实现全站中⽂简繁转换
腾讯客服在线qq⼀、不BB，直接解密
就是这么⼀⾏css：
font-variant-east-asian: traditional;
表⽰当前⽂字使⽤繁体变体。
再加粗显⽰⼀下：
font-variant-east-asian: traditional;有关鲁迅的故事
例如：
body {
font-variant-east-asian: traditional;
}
妮可 基德曼
就可以让整个页⾯的简体中⽂变成繁体。
月事女⼆、需要字体⽀持-OS X和iOS有效
卧槽，css居然有这么炫酷的能⼒，那为何没⼏个⼈知道呢？
关键问题就在于这种效果需要字体本⾝包含繁体变体。
因此，⽬前，在没有任何外界⼲预的情况下，⼀⾏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中各种中⽂字体版式横飞的场⾯。
>经典爱情电视剧
发布评论