CSS3中引入多种自定义字体font-face


Posted in HTML / CSS onJune 12, 2020

今天在HTML中发现了一个问题,提供给我们默认的字体有很多,但是除了那些“黑体”、“宋体”、“楷体”等支持中文字体之外,其余的都不知道中文字体,如果我们需要用自己喜欢的字体怎么办呢?CSS3中是否可以引入自定义下载的字体呢?如果可以我们应该怎么引入?带着这一系列的问题我们来看下解决方案,说什么都不如看效果,下面是三种字体在网页中的效果,“春联标准字体”、“江南艺术调字体”和“毛浙东艺术字体”的效果:

谷歌浏览器:

CSS3中引入多种自定义字体font-face

火狐浏览器:

CSS3中引入多种自定义字体font-face

以上就是效果展示,大家有个了解就可以了!
接着我们看下怎么在CSS中引入:

首先我们要引入某个字体,就应该有这么个字体,(用户不需要有),下载字体放到项目的font文件夹下面

CSS3中引入多种自定义字体font-face

字体下载大家在网上自行下载,也可以在这里下载,下载完成之后我们就来引入字体

HTML代码:

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>字体文件测试</title>
	</head>
	<body>
		<div class="chunlian">春联标准字体测试</div>
		<div class="jiangnan">江南艺术调字体测试</div>
		<div class="maozedong"> 毛泽东字体测试</div>
	</body>
</html>

然后就是CSS样式设置:

<style type="text/css">
			@font-face {
				font-family:'chunlian';
				src: url(font/chunlian.ttf);
			}
			@font-face {
				font-family: 'jiangnan';
				src:url(font/jiangnan.ttf);
			}
			.chunlian{
				font-family: 'chunlian';
				font-size: 50px;
				text-shadow: none;
			}
			.jiangnan{
				font-family: 'jiangnan';
				font-size: 40px;
			}
			@font-face {
				font-family: 'maozedong';
				src:url(font/maozedong.ttf);
			}
			.maozedong{
				font-family: 'maozedong';
				font-size: 50px;
				text-shadow: none;
			}
		</style>

如果再加入其他字体直接在CSS中写@font-face即可!

到此这篇关于CSS3中引入多种自定义字体font-face的文章就介绍到这了,更多相关CSS3引入自定义字体font-face内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章,希望大家以后多多支持三水点靠木!

HTML / CSS 相关文章推荐
CSS3制作炫酷的自定义发光文字
Mar 28 HTML / CSS
利用CSS3的线性渐变linear-gradient制作边框的示例
Jun 02 HTML / CSS
CSS实现雨滴动画效果的实例代码
Oct 08 HTML / CSS
详解canvas drawImage()方法绘制图片不显示的问题
Oct 08 HTML / CSS
HTML5 input placeholder 颜色修改示例
May 30 HTML / CSS
HTML5 canvas基本绘图之填充样式实现
Jun 27 HTML / CSS
使用HTML5里的classList操作CSS类
Jun 28 HTML / CSS
Html5元素及基本语法详解
Aug 02 HTML / CSS
详解使用postMessage解决iframe跨域通信问题
Nov 01 HTML / CSS
浅谈Html5页面打开app的一些思考
Mar 30 HTML / CSS
HTTP中的Content-type详解
Jan 18 HTML / CSS
css3 选择器
May 11 HTML / CSS
详解CSS3实现响应式手风琴效果
Jun 10 #HTML / CSS
CSS3实现淘宝留白的方法
Jun 05 #HTML / CSS
CSS3实现歌词进度文字颜色填充变化动态效果的思路详解
Jun 02 #HTML / CSS
CSS 3.0 结合video视频实现的创意开幕效果
Jun 01 #HTML / CSS
CSS3自定义滚动条样式 ::webkit-scrollbar的示例代码详解
Jun 01 #HTML / CSS
css3实现背景模糊的三种方式(小结)
May 15 #HTML / CSS
css3遮罩层镂空效果的多种实现方法
May 11 #HTML / CSS
You might like
让你同时上传 1000 个文件 (一)
2006/10/09 PHP
一个PHP的ZIP压缩类分享
2014/05/04 PHP
PHP实现PDO的mysql数据库操作类
2014/12/12 PHP
php实现表单多按钮提交action的处理方法
2015/10/24 PHP
PHP 与 UTF-8 的最佳实践详细介绍
2017/01/04 PHP
当鼠标移动时出现特效的JQuery代码
2013/11/08 Javascript
jQuery中not()方法用法实例
2015/01/06 Javascript
JavaScript在Android的WebView中parseInt函数转换不正确问题解决方法
2015/04/25 Javascript
jquery带动画效果幻灯片特效代码
2015/08/27 Javascript
高性能JavaScript循环语句和条件语句
2016/01/20 Javascript
js获取时间精确到秒(年月日)
2016/03/16 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
浅谈对于“不用setInterval,用setTimeout”的理解
2019/08/28 Javascript
javascript+css实现进度条效果
2020/03/25 Javascript
解决echarts图表使用v-show控制图表显示不全的问题
2020/07/19 Javascript
通过实例解析json与jsonp原理及使用方法
2020/09/27 Javascript
微信小程序实现登录注册功能
2020/12/29 Javascript
python解析模块(ConfigParser)使用方法
2013/12/10 Python
Flask框架的学习指南之用户登录管理
2016/11/20 Python
Python原始字符串与Unicode字符串操作符用法实例分析
2017/07/22 Python
CSS3等相关属性制作分页导航实现代码
2012/12/24 HTML / CSS
Amaze UI 文件选择域的示例代码
2020/08/26 HTML / CSS
Java里面如何把一个Array数组转换成Collection, List
2013/07/26 面试题
如何获得EntityManager
2014/02/09 面试题
竞选班长演讲稿
2013/12/30 职场文书
绿色环保演讲稿
2014/05/10 职场文书
2014年教学管理工作总结
2014/12/02 职场文书
公司停电通知
2015/04/15 职场文书
2015年医院科室工作总结范文
2015/05/26 职场文书
单独二胎证明
2015/06/24 职场文书
特种设备安全管理制度
2015/08/06 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
Redis主从配置和底层实现原理解析(实战记录)
2021/06/30 Redis
SQLServer权限之只开启创建表权限
2022/04/12 SQL Server
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL