Question

css如何单独给一个元素添加自定义字体

如题？怎么引用自定义字体文件？

Answer 1

使用@font-face来实现特殊字体的定义，定义时需要设置src和font-family属性

范例如下（其中，华文行楷只是一个范例，你可以换成任意一个字体）：

<style>
	@font-face {
		font-family: 'myfont';
		src: local('华文行楷'), url('STXINGKA.ttf') format('truetype');
	}
	.con {
		font-family: 'myfont';
		font-size: 44px;		
	}
</style>
<div class="con">《HTML5布局之路》</div>
<div>h5course</div>

显示效果：

只有类名为con的div设置了特殊字体

PS：url当中的是你字体文件的路径，假如是放在font文件夹下的某个字体，而你的html文件与font文件夹同级，那么路径就应该是“font/STXINGKA.ttf”。

追问

firefox不兼容啊

HTML：

firefox显示效果：

dw实时视图效果：

ie chrome Opera都可以

追答

这个有可能和不同浏览器对字体类型支持程度有关，比如说FF浏览器支持woff格式的文字，而谷歌等浏览器支持ttf、svg等格式的字体

你可以把src属性修改为书写多种字体的那种格式（当然需要先创建多种不同格式的字体库）

src: url('hkshaonv-webfont.eot?#iefix') format('embedded-opentype'),
url('hkshaonv-webfont.woff') format('woff'),
url('hkshaonv-webfont.ttf') format('truetype'),
url('hkshaonv-webfont.svg#HKshaonv') format('svg');

（如上的hkshaonv-webfont是一个字体名）

关于字体生成多种不同类型格式的字体，网上应该有工具或者在线能够处理的

追问

src: url('hkshaonv-webfont.eot?#iefix') format('embedded-opentype'),这行什么意思

追答

首先，上面代码当中，1~4行，其实是一行，注意用的是逗号

其次，format 是一个可选参数，它的作用是提示该资源 URL所引用的字体格式，比如说“embedded-opentype”就是IE6~8所支持的字体格式，而前面的url就是相应字体名字
你可以这么理解，你在做字体的时候，制作多个文件字体（之所以制作多个不同类型的同一种类型字体的文件，是因为不同浏览器对不同类型的字体文件支持程度不同，比如IE6~8支持.eot类型的字体），每一个url对应一个format，url就是那个字体文件的路径，而format就是针对这个的一个类型，css的文件引入知道吧，link标签里面会书写href和rel，href其实就是路径，而rel是这个文件对应的类型（stylesheet）。这个也是同样的原理，只不过是另一种书写方式。
如上给你的案例代码当中，相当于是为一个字体设置了多种不同类型的字体（.eot文件，.ttf文件等），然后针对每一个url引入，都“给出了相应的font格式说明”。