文档章节

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
好程序员web前端分享CSS3文本属性

浏览器前缀的简介及应用 好程序员web前端分享css3文案属性,某些CSS属性还只是最新版的预览版,并未发布成最终的正式版,而大部分浏览器已经为这些属性提供了支持,但这些属性是小部分浏览器...

好程序员IT
05/06
0
0
2018-05-26 CSS3实现动画加载效果

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

瑾瑜爱上猫
2018/05/25
0
0
CSS3 @Font-Face

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

早起的菜鸟
2011/09/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

Angular 英雄编辑器

应用程序现在有了基本的标题。 接下来你要创建一个新的组件来显示英雄信息并且把这个组件放到应用程序的外壳里去。 创建英雄组件 使用 Angular CLI 创建一个名为 heroes 的新组件。 ng gener...

honeymoose
今天
5
0
Kernel DMA

为什么会有DMA(直接内存访问)?我们知道通常情况下,内存数据跟外设之间的通信是通过cpu来传递的。cpu运行io指令将数据从内存拷贝到外设的io端口,或者从外设的io端口拷贝到内存。由于外设...

yepanl
今天
6
0
hive

一、hive的定义: Hive是一个SQL解析引擎,将SQL语句转译成MR Job,然后再在Hadoop平台上运行,达到快速开发的目的 Hive中的表是纯逻辑表,就只是表的定义,即表的元数据。本质就是Hadoop的目...

霉男纸
今天
5
0
二、Spring Cloud—Eureka(Greenwich.SR1)

注:本系列文章所用工具及版本如下:开发工具(IDEA 2018.3.5),Spring Boot(2.1.3.RELEASE),Spring Cloud(Greenwich.SR1),Maven(3.6.0),JDK(1.8) Eureka: Eureka是Netflix开发...

倪伟伟
昨天
15
0
eclipse常用插件

amaterasUML https://takezoe.github.io/amateras-update-site/ https://github.com/takezoe/amateras-modeler modelGoon https://www.cnblogs.com/aademeng/articles/6890266.html......

大头鬼_yc
昨天
9
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部