CSS中的字体

2017-10-19 10:55:37

总字数 842

预计阅读时间 3 分钟

在CSS当中 , 我们通常使用@font-face来定义字体
除了可以引入外部字体之外 , 也可以给系统本地的字体定义别名
比如

@font-face {
  font-family : YH;
  src : local("microsoft yahei");
}
.font {
  font-family:YH;
}

这样我们就可以在需要使用这个字体的地方直接使用这个别名

通常不推荐在网页当中引入外部的中文字体包
因为中文字体包通常很大 , 会导致严重的加载缓慢

然而在Mac系统当中没有微软雅黑字体 , 我们希望在Mac系统上使用苹方字体 , windows系统上使用微软雅黑字体

@font-face {
  font-family : BASE;
  src: local("PingFang SC"),
    local("Microsoft Yahei");
}

这样字体的应用就更加简便了

unicode-range

这个属性可以给特定的字符指定特定的字体
通过unicode编码去指定字符
比如我们需要给一段文字当中的引号使用宋体 , 其他的文字使用微软雅黑或者苹方字体
可以这样做

@font-face {
  font-family: BASE;
  src: local('PingFang SC'),
       local('Microsoft Yahei');
}
@font-face {
  font-family: quote;
  src: local('SimSun');    
  unicode-range: U+201c, U+201d;
  /* 中文前引号与后引号对应的unicode编码 */
}
.font {
    font-family: quote, BASE;
}

css_font

FireFox浏览器对字体名称的大小写敏感

unicode-range的用法

/* 支持的值 */
unicode-range: U+26;               /* 单个字符编码 */
unicode-range: U+0-7F;
unicode-range: U+0025-00FF;        /* 字符编码区间 */
unicode-range: U+4??;              /* 通配符区间 */
unicode-range: U+0025-00FF, U+4??; /* 多个值 */

前端领域的字符表示方式总结
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单独对其中的逗号进行处理

unicode-range

补充 : 使用千位分隔符表示大数字

正则表达式

使用toLocalString()方法

使用`toLocalString()`方法