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

网页制作 2024/11/24 佚名

3 2 1

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

谷歌浏览器：

火狐浏览器：

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

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

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

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

免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com

评论“CSS3中引入多种自定义字体font-face”

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

暂无“CSS3中引入多种自定义字体font-face”评论...

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

暴雪近日发布了《魔兽世界》10.2.6 更新内容，新游玩模式《强袭风暴》即将于3月21 日在亚服上线，届时玩家将前往阿拉希高地展开一场 60 人大逃杀对战。

艾泽拉斯的冒险者已经征服了艾泽拉斯的大地及遥远的彼岸。他们在对抗世界上最致命的敌人时展现出过人的手腕，并且成功阻止终结宇宙等级的威胁。当他们在为即将于《魔兽世界》资料片《地心之战》中来袭的萨拉塔斯势力做战斗准备时，他们还需要在熟悉的阿拉希高地面对一个全新的敌人──那就是彼此。在《巨龙崛起》10.2.6 更新的《强袭风暴》中，玩家将会进入一个全新的海盗主题大逃杀式限时活动，其中包含极高的风险和史诗级的奖励。
《强袭风暴》不是普通的战场，作为一个独立于主游戏之外的活动，玩家可以用大逃杀的风格来体验《魔兽世界》，不分职业、不分装备（除了你在赛局中捡到的），光是技巧和战略的强弱之分就能决定出谁才是能坚持到最后的赢家。本次活动将会开放单人和双人模式，玩家在加入海盗主题的预赛大厅区域前，可以从强袭风暴角色画面新增好友。游玩游戏将可以累计名望轨迹，《巨龙崛起》和《魔兽世界：巫妖王之怒经典版》的玩家都可以获得奖励。

更新动态

2024年11月24日

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

CSS3,自定义字体,font-face

纯CSS实现左右拖拽改变布局大小

CSS中的float和margin的混合使用示例代码

评论“CSS3中引入多种自定义字体font-face”

《魔兽世界》大逃杀！60人新游玩模式《强袭风暴》3月21日上线

更新动态

友情链接