关闭

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

时间: 2021-01-25阅读: 142

一、不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键变繁体:

//zxx: 如果你看到这段文字,说明你现在访问是体验糟糕的垃圾盗版网站,你可以访问原文获得很好的体验:https://www.zhangxinxu.com/wordpress/?p=9779(作者张鑫旭)

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中各种中文字体版式横飞的场面。

本文地址: https://www.zhangxinxu.com/wordpress/?p=9779


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/10134

JavaScript 私有成员

JavaScript 一直没有私有成员并不是没有原因,所以这一提议给 JavaScript 带来了新的挑战。但同时,JavaScript 在 ES2015 发布的时候已经在考虑私有化的问题了,所以要实现私有成员也并非毫无基础。

为什么不建议使用 index 作为 key 值

使用 index 作为 key 值有什么问题呢? 在我们日常开发中我们经常会和 key 值打交道. 但是我们扪心自问, 真的理解 key 吗? 我想大多数朋友可能会有些许犹豫.

Js判断变量是否为数字的几种方式

JavaScript 是一种动态类型的语言,这意味着解释器是在运行时确定变量类型的。这允许我们可以用同一变量中存储不同类型的数据。但是如果没有文档和保持一致性,在使用代码时,我们很有可能并不知道变量究竟是哪种类型

forward和redirect的区别?http状态码301,302分别代表什么?

从地址栏显示来说:forward是服务器内部重定向,客户端浏览器的网址不会发生变化;redirect发生一个状态码,告诉服务器去重新请求那个网址,显示的的新的网址数据共享:forward使用的是同一个request

前端Js生成GUID的方法

需要GUID的时候,可以完全由算法自动生成,不需要一个权威机构来管理。GUID理论上能产生全球唯一的值,对于以后的数据导入很方便。生成两个相同的GUID的可能性非常小,但不为0

JavaScript中的switch语句

JavaScript语言中的条件语句,除了if 语句,还有switch 语句。switch 常用于根据不同的条件执行不同的操作。虽然它和 if 语句都是用来判断条件的语句,但是它们之间还是有不同。

前端PDF文件转图片方法

先下载pdfjs,网址:PDF下载地址,再引入到项目中,我是标签直接引用的,html代码添加两行代码,一个是canvas用来绘图,一个是img用来最后展示转换后的pdf图片

NodeJS/JWT/Vue 实现基于角色的授权

在本教程中,我们将完成一个关于如何在 Node.js 中 使用 JavaScript ,并结合 JWT 认证,实现基于角色(role based)授权/访问的简单例子。作为例子的 API 只有三个路由,以演示认证和基于角色的授权

(a== 1 && a ==2 && a==3) ever evaluate to true? 几种解法分析

toString() valueOf()比较会隐式调用toString或者valueOf方法,如果原始类型的值和对象比较,对象会转为原始类型的值,再进行比较。array.join = array.shift数组也是对象,数组的toString 方法返回一个字符串

挑战常规--不要使用||赋予默认值

js是一种弱类型的编程语言,代表着传入的变量并不清楚作为何种类型使用。对js来说传入的任意参数都应该考虑不同类型的结果,而不是单单考虑一种情况。若传入0、false等,||所要实现默认值的功能完全错误的

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!