文档章节

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

工业革命
 工业革命
发布于 2017/08/28 22:14
字数 265
阅读 3
收藏 0

##@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]

© 著作权归作者所有

共有 人打赏支持
工业革命
粉丝 2
博文 21
码字总数 8826
作品 0
太原
高级程序员
私信 提问
CSS3 @font-face 网站在客户端显示没有的字体

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自...

adamduan
2014/07/21
0
0
响应式Web设计——自定义网页字体

多年来我们一直被迫使用一组单调乏味的Web安全字体。当网页设计中确实需要一些优雅的字体时,我们通常都是使用图片来替代,并对元素使用text-indent规则将实际的文本移出视口范围。 曾有一些...

生气的散人
2013/03/07
3.3K
4
CSS3 @Font-Face

@font-face是CSS3中的一个模块,他主要是把自己定义的Web字体嵌入到你的网页中,随着@font-face模块的出现,我们在Web的开发中使用字体不怕只能使用Web安全字体,你们当中或许有许多人会不自...

早起的菜鸟
2011/09/19
0
0
2018-05-26 CSS3实现动画加载效果

最近在系统的学习CSS3方面的知识,以前经常在编程使用到部分CSS3属性,但没有想到还有许多功能强大的功能都是在CSS3当中提出的。对于学习前端的同学们,一定要熟悉掌握CSS3的相关知识,可以极...

瑾瑜爱上猫
2018/05/25
0
0
Web-Fontmin -- 在线提取你需要的字体

关于@font-face @font-face是CSS3中的一个模块,使用 @font-face 可以自定义网页字体,即使用户的电脑没有安装某种字体。怎么用 @font-face 呢?你可能见过类似下面的代码片段,它可以让 @f...

forsigner
2016/03/14
45
0

没有更多内容

加载失败,请刷新页面

加载更多

LIst的逆向遍历

public class list_demo { public static void main(String[] args) {// TODO Auto-generated method stub List list=new ArrayList<>(); list.add("a"); list.add("b");......

南桥北木
24分钟前
1
0
Linux下端口转发工具rinetd介绍

linux下简单好用的工具rinetd,实现端口映射/转发/重定向,针对TCP协议,不支持UDP。 官网地址 http://www.boutell.com/rinetd 里面介绍及使用齐全。 使用场景举例: 阿里云内网Redis连接问题...

ouhoo
37分钟前
4
0
Oracle学习日志-5(算数运算符,比较运算符和逻辑运算符)

因为有编程基础,所以对于这一章还是很好理解,只需要注意对NULL的运算。 操作的表格 算数运算符 查询商品名字和商品售价,并商品售价乘2 SELECT product_name,sale_price * 2 AS "sale_pri...

白话
50分钟前
1
0
搜索引擎(Lucene介绍、分词器详解)

Lucene介绍 Lucene简介 最受欢迎的java开源全文搜索引擎开发工具包。提供了完整的查询引擎和索引引擎,部分文本分词引擎(英文与德文两种西方语言)。Lucene的目的是为软件开发人员提供一个简...

这很耳东先生
54分钟前
4
0
quartz详细介绍

quartz常用api Scheduler 调度程序交互的主要API。 Job 希望由调度程序执行的组件实现的接口。 JobDetail 用于定义作业的实例。 JobDataMap 可以包含不限量的序列化数据,在job运行的时候可以...

大笨象会跳舞吧
55分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部