HTML网站外部字体包的引用和兼容写法@font-face

Fish北冥

已于 2024-07-24 17:08:52 修改

阅读量383

点赞数

分类专栏： CSS 前端笔记文章标签： css html

于 2021-04-14 16:31:28 首次发布

本文链接：https://blog.csdn.net/qq_42400124/article/details/112624512

版权

CSS 同时被 2 个专栏收录

21 篇文章 2 订阅

订阅专栏

前端笔记

4 篇文章 0 订阅

订阅专栏

@font-face外部字体包的引用和兼容

一. 常用的字体格式有 woff，ttf，eot，otf，svg

字体兼容写法

@font-face{
	font-family:"tl01";
	src: url("../font/PlayfairDisplay-Bold.woff") format("woff"),
       url("../font/PlayfairDisplay-Bold.ttf") format("truetype"),
       url("../font/PlayfairDisplay-Bold.eot") format("embedded-opentype"),
       url("../font/PlayfairDisplay-Bold.otf") format("opentype"),
	   url('../font/PlayfairDisplay-Bold.svg') format('svg');
}

二. @font-face属性介绍

font-family: 自定义字体名称
src: 引用的字体路径位置
font-style: normal italic oblique (默认正常)
font-weight: 定义字体的粗细。默认值是"正常"

这里需要自定义一套字体，需要有正常，细，粗不同的效果（前面引入字体发现只有 blod 可以加粗，lighter没有生效，现在来优化一下）
注：同一套字体font-family的名称要一致
这里可以看出同一字体和样式下，定义了font-weight和未定义的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style>
			@font-face{
				font-family:"Source";
				src:url("css/font/SourceHanSansCN-Normal.otf") format("opentype");     
			}
			@font-face{
				font-family:"Source";
				src:url("css/font/SourceHanSansCN-Light.otf") format("opentype");     
				font-weight: 300;
			}
			@font-face{
				font-family:"Source";
				src:url("css/font/SourceHanSansCN-Bold.otf") format("opentype");     
				font-weight: 600;
			}
			@font-face{
				font-family:"Sans";
				src:url("css/font/SourceHanSansCN-Normal.otf") format("opentype");     
			}
			.list01 p{font-family: Source;}
			.list02 p{font-family: Sans;}
			.min{width: 500px;margin: 100px auto;}
			h3{font-size: 40px;color: #f00;margin: 10px auto;font-weight: bold;}
			p{font-size: 32px;color: #333;line-height: 60px;margin: 0;}
			p:nth-of-type(1){font-weight: 300;}
			p:nth-of-type(3){font-weight: 600;}
		</style>
	</head>
	<body>
		<div class="min">
			<div class="list01">
				<p>哈哈哈哈，我是细体</p>
				<p>哈哈哈哈，我是正常</p>
				<p>哈哈哈哈，我是加粗</p>
			</div>
			<h3>以下是未定义对比</h3>
			<div class="list02">
				<p>哈哈哈哈，我是细体</p>
				<p>哈哈哈哈，我是正常</p>
				<p>哈哈哈哈，我是加粗</p>
			</div>
		</div>
	</body>
</html>

三. 这里分享一个我常用的字体转码网站

字客网：https://www.fontke.com/tool/convfont/

Fish北冥

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
1
评论
HTML网站外部字体包的引用和兼容写法@font-face

外部字体包的引用和兼容首先常用的字体格式有 woff，ttf，eot，otf，svg@font-face{ font-family:"calibri"; src: url("../font/SourceHanSansK-RegularSub.woff") format("woff"), url("../font/SourceHanSansK-RegularSub.ttf") format("truetype"), url("../font/SourceHanSans
复制链接

扫一扫

专栏目录