Css3 @font-face 为自己的网页设置自定义字体
Css3 @font-face 为自己的网页设置自定义字体
工业革命 发表于9个月前
Css3 @font-face 为自己的网页设置自定义字体
  • 发表于 9个月前
  • 阅读 3
  • 收藏 0
  • 点赞 0
  • 评论 0

移动开发云端新模式探索实践 >>>   

摘要: Css3中的 @font-face主要用于添加自定义字体。 提出一个疑惑,本疑惑跟内容无关,是MarkDown,Css代码默认是不换行的,加一个点(.)后可以产生自动换行效果,也就是原来黏贴的代码样式。

##@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;
}

最终效果图:
效果图;

August 28,2017[Pm 22:13]

  • 打赏
  • 点赞
  • 收藏
  • 分享
共有 人打赏支持
粉丝 1
博文 12
码字总数 8826
×
工业革命
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!
* 金额(元)
¥1 ¥5 ¥10 ¥20 其他金额
打赏人
留言
* 支付类型
微信扫码支付
打赏金额:
已支付成功
打赏金额: