[分享]css3思源黑体样式

在众多字体样式中，“思源黑体”可以说是众所周知的一种字体。而在CSS3中，也提供了对“思源黑体”样式的支持，为用户的页面设计增添了更多的不同风格。fontface { fontfamily: Sour...

在众多字体样式中，“思源黑体”可以说是众所周知的一种字体。而在CSS3中，也提供了对“思源黑体”样式的支持，为用户的页面设计增添了更多的不同风格。

@font-face {
    font-family: 'SourceHanSansCN';
    src: url('sourcehansanscn-regular.eot'); 
    src: local('?'), url('sourcehansanscn-regular.woff') format('woff'), url('sourcehansanscn-regular.ttf') format('truetype'), url('sourcehansanscn-regular.svg') format('svg');
} 

以上代码便是使用CSS3引入“思源黑体”字体，其中使用@font-face标签引入字体，并给定了字体的名称。同时，通过src属性指定了字体的路径。值得注意的是，从上至下的多行声明中，浏览器会根据每个src属性值进行分析并下载字体的格式。

在为文本添加字体时，只需要在CSS文件中的相关元素属性设定其字体名称为“SourceHanSansCN”即可：

body {
    font-family: 'SourceHanSansCN', sans-serif;
} 

此时，整个页面上的字体便会变成“思源黑体”字体。当然，如果希望特定元素上的文本使用“思源黑体”字体，也可以在该元素的CSS样式中进行指定，例如：

h1 {
    font-family: 'SourceHanSansCN', sans-serif;
    font-weight: bold;
    font-size: 36px;
    color: #333;
} 

以上样式就是一种使用思源黑体字体的标题的例子。通过上述的代码，我们可以看出，在CSS3中使用思源黑体字体还是非常方便的。而这样的使用方式不仅可以因为别具一格的样式而让页面更为优美，也更加符合用户心理预期，从而实现良好的用户体验。