Css3 @font-face 为自己的网页设置自定义字体

chiyongfu2524

于 2017-08-28 22:14:00 发布

阅读量216

点赞数

CC 4.0 BY-SA版权

原文链接：https://my.oschina.net/IndustrialRevolutio/blog/1525214

本文详细介绍了一种使用CSS @font-face规则来引入并应用自定义字体的方法。通过具体实例，展示了如何将外部字体文件链接到HTML文档中，并在特定元素上应用该字体。此外，还提供了完整的代码示例，包括HTML结构、CSS样式以及最终的视觉效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

##@font-face

首先是大概文件格式:
Pro(项目)\font\ sjnmd.ttf
Pro(项目)\ index.html

<div id="poetry">
<p>东风夜放花千树。</p>
	<p>更吹落、星如雨。宝马雕车香满路。</p>
		<p>凤箫声动，玉壶光转，一夜鱼龙舞。 </p>
<p>蛾儿雪柳黄金缕。</p>
	<p>笑语盈盈暗香去。</p>
		<p>众里寻他千百度。蓦然回首，那人却在，灯火阑珊处。</p>
</div>

Pro(项目)\css\ style.css

/*引入字体文件*/
@font-face{
font-family:"世界那么大";  /*这句注释以及注释后面的那个小点.都跟本文无任何关系*/.
        src: url("../font/sjnmd.ttf") format("truetype");
}
/*应用字体文件*/
#poetry{
	font-family:  "世界那么大";
	font-size: 18px;
}
#poetry p{
	padding:6px 10px;
	color: cornflowerblue;
}

最终效果图:
;