CSS - 通过 WebFont 技术引入在线字体（@font-face 语句）

最新推荐文章于 2024-05-25 16:50:19 发布

kikajack

最新推荐文章于 2024-05-25 16:50:19 发布

阅读量1.1w

点赞数 2

分类专栏：前端（HTML，CSS，JS，框架）文章标签： WebFont

本文链接：https://blog.csdn.net/kikajack/article/details/79279412

版权

前端（HTML，CSS，JS，框架）专栏收录该内容

23 篇文章 0 订阅

订阅专栏

@font-face MDN 资料
 @font-face 用法的参考博客
 WebFont 技术的参考博客
 开源项目 webfontloader
开源项目字蛛（中文字体压缩器）
中文字体网页开发指南 - 阮一峰
 @font-face 兼容性，如何用 @import 或 link 标签引入字体，各种字体格式详解
 科大博客提供 Google Fonts 加速
 360网站卫士常用前端公共库CDN服务（含 Google 字体）

1. WebFont 技术

通过 WebFont 技术，网页可以使用在线字体（比如 Google 推出的免费 WebFont 云托管服务），无需使用图片，减少流量消耗。在线字体无需用户安装在终端设备上。

专用于 Web 展示的 woff 格式字体也得到各大浏览器厂商支持，减少了字体的体积。
WebFont 仍然是文字，相比使用图片，具有很多优点：支持选中、复制，支持 Ctrl+F 查找，搜索引擎友好等。

中文问题

汉字有数万个，导致中文字体文件有好几 MB 大小，实际项目中无法使用。
中文字体有两种解决方案：制作精简版字体（繁琐，修改麻烦，效率低下且容易出错）或使用字体云服务（压缩与转码字体）。国内目前有两家公司提供：
http://www.youziku.com （有字库）
http://cn.justfont.com （就是字）

字蛛

字蛛是一个智能 WebFont 压缩工具，它能自动分析出页面使用的 WebFont 并进行按需压缩。

2. 用法

通过 CSS 的 @font-face 语句可以引入在线字体，使用 CSS 选择器指定运用字体的文本。

/* icomoon 字体图标库的示例 */
@font-face {
    font-family: 'icomoon';
    src:url('../fonts/icomoon.eot?efsk18');
    src:url('../fonts/icomoon.eot?#iefixefsk18') format('embedded-opentype'),
        url('../fonts/icomoon.woff?efsk18') format('woff'),
        url('../fonts/icomoon.ttf?efsk18') format('truetype'),
        url('../fonts/icomoon.svg?efsk18#icomoon') format('svg');
    font-weight: normal;
    font-style: normal;
}

[class^="icon-"], [class*=" icon-"] {
    font-family: 'icomoon';
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-list:before {
    content: "\e600";
}

/* MDN 示例 */
<html>
<head>
  <title>Web Font Sample</title>
  <style type="text/css" media="screen, print">
    @font-face {
      font-family: "Bitstream Vera Serif Bold";
      src: url("https://mdn.mozillademos.org/files/2468/VeraSeBd.ttf");
    }

    body { font-family: "Bitstream Vera Serif Bold", serif }
  </style>
</head>
<body>
  This is Bitstream Vera Serif Bold.
</body>
</html>

kikajack

关注

2
点赞
踩
5

收藏

觉得还不错? 一键收藏
2
评论
CSS - 通过 WebFont 技术引入在线字体（@font-face 语句）

@font-face MDN 资料 @font-face 用法的参考博客 WebFont 技术的参考博客开源项目 webfontloader 开源项目字蛛（中文字体压缩器）中文字体网页开发指南 - 阮一峰 @font-face 兼容性，如何用 @import 或 link 标签引入字体，各种字体格式详解科大博客提供 Google Fonts 加速 360网站卫士常用前端公共...
复制链接

扫一扫

专栏目录