文档章节

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]

© 著作权归作者所有

共有 人打赏支持
工业革命
粉丝 1
博文 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.2K
4
2018-05-26 CSS3实现动画加载效果

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

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

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

早起的菜鸟
2011/09/19
0
0
Web-Fontmin -- 在线提取你需要的字体

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

forsigner
2016/03/14
45
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

iOS开发用到的图片尺寸汇总

启动图 型号 竖屏 横屏 iPhone SE 640px × 1136px 1136px × 640px iPhone 6s 750px × 1334px 1334px × 750px iPhone 6s Plus 1242px × 2208px 2208px × 1242px iPhone 7 750px × 1334......

业界小白
15分钟前
0
0
浅谈redis

redis是一个开源,内存式的健值存储数据库,也被称为健值存储的字典服务器。健值类型有字符串,hash(哈希类型),set(集合),list(列表) 和有序集合 特征细节: 内存式:redis将健值存储在主...

拐美人
22分钟前
0
0
无限扩容,按需使用!ZStack推出基于阿里云NAS的文件存储服务

日前,ZStack发布2.6.0版本,正式宣布推出基于阿里云NAS的文件存储服务。得益于业界领先的阿里云分布式存储架构,融合NAS后的ZStack 2.6.0拥有高性能、高可靠、容量无限扩展、一键操作、按需...

ZStack社区版
25分钟前
1
0
崛起于Springboot2.X之Mongodb多数据源处理(35)

多数据源:4个mongodb库! 目录结构图: 1、添加pom依赖 <dependency> <groupId>org.springframework.boot</groupId> <artifactId>spring-boot-starter-data-mongodb</artifactId>......

木九天
30分钟前
0
0
如何获取显示器的EDID信息

Q1: 为什么要写这篇文章? A1:在最近的工作中遇到了不少问题,其中很多都是和EDID相关的。可以说,作为一家以“显示”为生的企业,我们时时刻刻在与EDID打交道。EDID这东西很简单,但是如果...

DB_Terrill
31分钟前
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部