常见应用 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"; /* -->关联字体名称 */
}定义字体名称 和 关联字体名称 必须一致，否则无法链接到字体文件。
字体文件无法跨域调用，若是目标域与字体域不同将无法正常显示，请见：转换为 base64 编码数据
链接 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 多个字体应用实例
- 导入字体
每个字体类使用 @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>@font-face 合并两个实例预览
https://static.hexingxing.cn/v2/example/fontspreview.html
* Internet Explorer 9 只支持 .eot 格式字体。
转换为 base64 编码数据
- 浏览器访问字体转换网站：Transfonter；
- 勾选 Family support 和 Base64 encode，以及需要转换的字体格式，如 WOFF WOFF2；
- 点击 Add fonts 按钮，选择本地字体进行上传操作；
- 上传完成后请点击 Convert 按钮进行转换；
- 转换完成后请点击 Download 下载本地或 Preview 在线预览；
- 下载到本地的字体压缩包内已包含转换后的字体文件以及完整的示例文件；
- 将 stylesheet.css 文件里面的 @font-face 代码段拷贝至应用环境的项目开始应用。
示例文件：
- 官网原版 https://static.hexingxing.cn/v3/html/base64fonts
- 何星星版 https://static.hexingxing.cn/v3/html/base64fontspreview
更多字体应用相关链接
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 条评论