常见应用 Web 字体格式

url(hexingxingCN.eot) --> format("embedded-opentype")
url(hexingxingCN.woff2) --> format("woff2")
url(hexingxingCN.woff) --> format("woff")
url(hexingxingCN.ttf) --> format("truetype")
url(hexingxingCN.otf) --> format("opentype")

引入本地实体字体文件*

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

  • @font-face {font-family:; /定义字体名称/ src:; /链接字体文件/}
  • body {font-family:; /关联字体名称/}
@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"; /* -->关联字体名称 */
}

定义字体名称关联字体名称 必须一致,否则无法链接到字体文件。

链接 CSS 格式字体文件

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

  • @font-face {font-family:; /定义字体名称/ src:; /链接字体文件/} 该语句在 link 的外部文件写入
  • body {font-family:; /关联字体名称/}
<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>

多个字体应用实例

  • 导入字体
    每个字体类使用 @font-face {…} 分别包裹,内部可以支持链接多个不同格式(eot、ttf、woff 等)的同一字体同,用于在不同平台获得支持渲染。
  • 关联字体
    所需的字体使用 * {font-family:…;} 统一包裹,内部可以顺序写入多个字体名称,优先级从左向右适配。

* 为通用全局,私有适配可以使用 html body div span p 标签等。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<title></title>
	<style type="text/css">
		/* -- 命令字体名称 &导入字体文件 -- */
		@font-face {
			font-family: 'DINCOROS';
			src: url('./fonts/DINCOROS-Bold.ttf') format("truetype");
		}

		@font-face {
			font-family: 'BebasNeue';
			src: url('./fonts/BebasNeue.otf') format('opentype');
		}

		@font-face {
			font-family: 'LeagueGothic';
			src: url('./fonts/LeagueGothic-Regular.otf') format('opentype');
		}

		@font-face {
			font-family: 'AVENGEANCE';
			src: url('./fonts/AVENGEANCE-HEROIC-AVENGER.otf') format("opentype");
		}

		@font-face {
			font-family: 'noodle';
			src: url('./fonts/big-noodle-titling.ttf') format("truetype");
		}

		@font-face {
			font-family: 'noodleOblique';
			src: url('./fonts/big-noodle-titling-oblique.ttf') format("truetype");
		}

		@font-face {
			font-family: 'SounsoQuality';
			src: url('./fonts/Sounso-Quality.ttf') format("truetype");
		}

		/* -- 应用字体到网站渲染流 -- */
		html,body,div {
			font-family:"DINCOROS","BebasNeue","LeagueGothic","AVENGEANCE","noodle","noodleOblique","SounsoQuality";} 

	</style>
</head>
<body>
	<div>hexingxing.cn</div>
</body>
</html>

合并实例在线预览

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

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

更多应用相关链接

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

https://hexingxing.cn/averta-fonts-demo

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

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