总字数 842
预计阅读时间 3 分钟
在CSS当中 , 我们通常使用@font-face
来定义字体
除了可以引入外部字体之外 , 也可以给系统本地的字体定义别名
比如
1 | @font-face { |
这样我们就可以在需要使用这个字体的地方直接使用这个别名
通常不推荐在网页当中引入外部的中文字体包
因为中文字体包通常很大 , 会导致严重的加载缓慢
然而在Mac系统当中没有微软雅黑字体 , 我们希望在Mac系统上使用苹方字体 , windows系统上使用微软雅黑字体
1 | @font-face { |
这样字体的应用就更加简便了
unicode-range
这个属性可以给特定的字符指定特定的字体
通过unicode编码去指定字符
比如我们需要给一段文字当中的引号使用宋体 , 其他的文字使用微软雅黑或者苹方字体
可以这样做
1 | @font-face { |
FireFox浏览器对字体名称的大小写敏感
unicode-range的用法
1 | /* 支持的值 */ |
前端领域的字符表示方式总结
- HTML中字符输出使用
&#x
配上charCode值- 在JavaScript文件中为防止乱码转义,则是
\u
配上charCode值- 在CSS文件中,如CSS伪元素的content属性,直接使用
\
配上charCode值- unicode-range是
U+
配上charCode值
补充 : 使用千位分隔符表示大数字
在移动端 , 对于超过一定个数的连续数字 , 系统会默认当做电话号码来处理 , 而不是一个数字
点击这个数字的时候 , 可以触发系统的电话呼叫
如果我们想干掉这个特性 , 通常的做法是使用<meta>
标签
1 | <meta name="format-detection" content="telephone=no" |
这样就意味着本来可以进行便捷呼叫的手机号码 , 变成了一串普通的数字
对于确实表示数字含义的一串数字来说 ( 不是编码或者流水号之类的内容 ) , 只是这样做也是影响体验的
它本身也不方便进行辨识
我们可以考虑将其格式化为包含千位分隔符的一个字符串
处理方式
正则表达式
用法举例
1 | String(123456789).replace(/(\d)(?=(\d{3})+$)/g, "$1,"); |
使用toLocalString()
方法
用法举例
1 | (123456789).toLocaleString('en-US'); |
对于中文场景下,toLocaleString(‘en-US’)中的’en-US’理论上是可以缺省的
但是如果产品可能海外用户使用,则保险起见,还是保留’en-US’
在这种情况下 , 如果我们想要美化这个逗号
使用JS进行筛选处理会十分繁琐
我们就可以使用unicode-range
单独对其中的逗号进行处理