引入本地实体字体文件*

@font-face 方式,以 Gauge Mono Regular 字体举例

@font-face {
	font-family:"Gauge Mono Regular";
	src:url(//static.hexingxing.cn/v2/element/fonts/webfonts/Gauge_Mono_Regular_Webfont.woff2) format("woff2"),
	url(//static.hexingxing.cn/v2/element/fonts/webfonts/Gauge_Mono_Regular_Webfont.woff) format("woff");
}
body {
	font-family: "Gauge Mono Regular";
	font-size: 1rem;
}

链接 CSS 格式字体文件

link 标签文件,以 HCo Gotham SSm 字体举例

<link rel="stylesheet" type="text/css" href="//static.hexingxing.cn/v2/element/fonts/webfonts/HCo_Gotham_SSm_Fonts.css" />
<style type="text/css">
	body {
		font-family: "HCo Gotham SSm";
		font-size: 3rem;
	}
</style>

<body>
	1234567890<br>
	Aa Bb Cc Dd Ee Ff Gg Hh Ii Jj Kk Ll Mm Nn Oo Pp Qq Rr Ss Tt Uu Vv Ww Xx Yy Zz
</body>

合并实例在线预览

https://static.hexingxing.cn/v2/example/fontspreview.html

* Internet Explorer 9 只支持 .eot 格式字体。

相关链接

https://hexingxing.cn/google-fonts-api/

https://hexingxing.cn/15-best-google-fonts/

https://hexingxing.cn/css3-font-face-and-link-css/

https://hexingxing.cn/visual-colors-and-fonts-style/


何星星原创文章仅用于个人学习,当前页面暂不支持复制操作,了解详情或文章转载请 点此 继续!
分类: 前端开发

0 条评论

发表回复

Avatar placeholder

您的电子邮箱地址不会被公开。 必填项已用*标注