前端技巧CSS给网页中英文或给指定字符设置不同字体

CSS给网页中英文或给指定字符设置不同字体

众所周知,在CSS里可以用过font-fanily属性来定义网页中文字的字体,关于网页的字体,在实际运用中还有更多可自定义的地方值得研究,比如给中英文不同的字体,或者是自定义自己喜欢的字体,或者是给网页上某个特定的字符定义不同的字体等等,下面笔者由浅入深来介绍一些实用的技巧:

比如有很多站长给网页定义字体是这样定义的:

font-family:"Microsoft YaHei",STXihei,SimSun,Tahoma,Verdana,Arial,sans-serif;
给网页上的汉字和英文分别设置不同的字体

根据字体属性的规则,写在前面的字体优先,也就是说如果用户的设备上有雅黑字体则显示雅黑,如果没有便使用细黑字体,依次类推,根据这个特点,可以很轻松的实现网页上的中文和英文分别显示不同的字体,例如:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<title>CSS测试页面</title> 
<style type="text/css">
body {font-size:20px;font-family:"Courier New","Microsoft YaHei";}
</style> 
</head> 
<body> 
<div class="demo"> 
美国 USA 英国 UK 加拿大 Canada 新西兰 New Zealand
</div>  
</body>
</html>

这里将英文字体"Courier New"写在微软雅黑的前面,该字体不认识中文,所以该页面所显示的效果是英文采用了Courier New字体,中文则跳过第一个字体,显示为后面设置的雅黑字体,所以给网页上中英文设置不同字体的方法就是:将不认识中文的英文字体写在中文字体的前面即可。

CSS设置中英文不同字体.png

通过@font-face属性自定义字体

在CSS里可以通过@font-face规则定义属于自己的字体,它的用法是先定义自己的字体名称,然后将其指向具体的字体文件,例如:

<style> 
@font-face {font-family:MYFONT;src:url(/style/1.ttf);}
body {font-family:MYFONT;}
</style>

这里自定义字体的名称为MYFONT,指向style目录下的1.ttf字体文件,然后就可以使用自己定义的字体了,注意这里ttf字体文件的路径要正确。

使用该规则还可以简化字体的定义,例如:

@font-face {font-family:MY;src:local("Microsoft Yahei");}

这里相当于把雅黑字体自定义为MY,这样在网页其他部分用到该字体的时候,均可以使用font-family:MY来定义,大大减少了代码量,当然您还可以将多个字体写在一起,例如:

@font-face {font-family:ABC;src:local("Courier New"),local("Microsoft Yahei");}

这里给网页定义font-family:ABC,便可使英文采用Courier New字体,中文采用雅黑字体了,上面的示例网页可以这样写:

@font-face {font-family:ABC;src:local("Courier New"),local("Microsoft Yahei");}
body {font-size:20px;font-family:ABC;}

这样的写法,效果和前面的是一模一样的。

给网页中特定的字符自定义字体

有时候还有还有遇到不喜欢某特定字符的样式,想单独给该字符换个字体,比如雅黑字体里的中文逗号并不好看,有没有办法让文字显示为雅黑,逗号显示为宋体样式的逗号呢?根据上面的思路,理论上我们只需在雅黑字体前面定义一个识别中文逗号但不认识中文汉字的字体就可以了。实际中很少遇到一款字体是认识中文逗号但不认识中文汉字的,即使是有,可能需要通过@font-face引入,有没有更简单的方法呢?下面简单的做个示例:

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8" /> 
<title>CSS测试页面</title> 
<style type="text/css">
body {font-size:200%;font-family:"Microsoft Yahei";color:#555;}
</style> 
</head> 
<body> 
<div class="demo"> 
海内存知己,天涯若比邻
</div>  
</body>
</html>

浏览这个网页,文字以雅黑字体展示,这里的逗号并不好看:

雅黑字体逗号.png

假如我想让这个逗号以宋体展现,如果不想另外引入字体文件的话,可以给逗号加上<span>标签,然后单独定义span的字体,可是如果整个网站里的都好都想换字体,那span该有多难加,而且加了网页也显得很杂乱,其实在CSS里通过unicode-range属性就能轻松的实现想要的效果了:

Unicode-range是@font-face中的一个属性,其作用是告知浏览器,仅在该属性定义的范围内使用自定义的字体,例如上面的示例,可以这样定义CSS:

@font-face {font-family:DH;src:local('SimSun');unicode-range:U+ff0c;}
body {font-size:200%;font-family:DH,"Microsoft Yahei";color:#555;}

这样以来,页面里的中文便采用雅黑字体,而中文逗号则使用了宋体展示,效果如下图:

雅黑字体逗号用宋体.png

关于unicode-range的值

这里的unicode-range:U+ff0c表示只对中文逗号采用自定义字体,这里的U+ff0c值如何得到,下面简单的介绍一下它的定义方法,它的语法格式是:

unicode-range:U+2026;    /* 单个字符的编码 */

unicode-range:U+0025-00FF;    /* 字符编码的区间 */

unicode-range:U+201?;              /* ?表示通配符*/

unicode-range:201c,201d,U+0025-00F;    /* 可定义多个值 */

也就是,在unicode-range里表示一个字符,则使用U+后面跟上该字符十六进制的转义值,例如在html里写入“&#x25”即可显示为百分号%,那么百分号%对应的unicode-range即为:U+25,下表列出常见符号的unicode-range值便于大家参考,中英文标点符号的编码都是不同的:

符号16进制转义符Unicode-range
@&#x40U+40
#&#x23U+23
$&#x24U+24
!&#x21U+21
%&#x25U+25
^&#x5eU+5e
&&#x26U+26
*&#x2aU+2a
(&#x28U+28
)&#x29U+29
_&#x5fU+5f
+&#x2bU+2b
{&#x7bU+7b
}&#x7dU+7d
[&#x5bU+5b
]&#x5dU+5d
\&#x5cU+5c
|&#x7cU+7c
;&#x3bU+3b
:&#x3aU+3a
'&#x27U+27
"&#x22U+22
,&#x2cU+2c
<&#x3cU+3c
.&#x2eU+2e
>&#x3eU+3e
/&#x2fU+2f
?&#x3fU+3f
~&#x7eU+7e
!&#xff01U+ff01
&#x2026U+2026
&#xff08U+ff08
&#xff09U+ff09
-&#x2dU+2d
&#x2014U+2014
=&#x3dU+3d
&#x3001U+3001
&#xff1bU+ff1b
&#xff1aU+ff1a
&#x2018U+2018
&#x2019U+2019
&#x201cU+201c
&#x201dU+201d
&#x300aU+300a
&#x300bU+300b
&#xff0cU+ff0c
&#x3002U+3002
&#xff1fU+ff1f
&#xff01U+ff01

在CSS中想为哪个特定的字符定义字体,则在unicode-range属性选择这个字符对应的值就行了,前面说到这个值还可以取某个范围,例如常见的:

数字0-9对应的unicode-range为:U+30-U+39

字母A-Z对应的unicode-range为:U+41-U+5a

字母a-z对应的unicode-range为:U+61-U+7a

您还可以去搜索引擎搜索“Unicode编码”了解更多关于Unicode字符编码的知识。

站长Colin Gao,85后自由职业者,爱钻研,爱学习网页设计。建立本站的目的是整理学习笔记,分享学习经验,认识更多的朋友。感谢您阅读本站的文章,部分内容参考了网上的一些教程,但我会尽量根据自己的理解写更多原创的东西,本站网址如下,欢迎转载:
如果方便的话,转载请注明来自:http://www.cssaaa.com/skill/109.html