一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第19天,点击查看活动详情。
保持客户端样式表现一致的关键:css @font-face引入外部字体
【每一个技术点都值得优写】系列2期。
一、前言
我们看到的网页所使用的字体,通常是操作系统默认支持的字体,比如Windows(10/8.1/8/7/Vista) 操作系统的默认字体是 Segoe UI(发音为 see go 这两个单词),早期版本的 Windows,默认字体是 Tahoma,简体中文下则是宋体。事实上,Windows 操作系统的默认字体,是由当前系统用户所在的地区决定的,在操作系统在启动应用程序的时候,会做判断,根据地区设置默认字体。
更高审美要求下,默认字体可能满足不了我们需求,因此我们需要引入一些特殊的字体,尤其是具有艺术性表达的美观字体,这有时会使我们的界面设计获得更大的好高度,带来更好的体验。
字体一致,这是真正保持客户端样式表现一致的关键。
那么,在web前端是如何支持引入外部字体的呢?css的 @font-face 会提供支持。
二、关键技术点介绍
1.@font-face 简介
这是一个叫做 @font-face 的CSS @规则 ,它允许网页开发者为其网页指定在线字体或加载指定的本地字体。有了 @font-face 的支持,我们可以引入想要的外部字体,从而消除对客户端字体的依赖,这在实现统一字体,统一审美,维持原始设计的完整真实性,保持客户端样式表现一致上有用,否则可能会造成不同客户端展现的字体效果具有差异。 @font-face 不仅可以放在在CSS的最顶层, 也可以放在 @规则 的 条件规则组 中。
2.@font-face 的基本用法
@font-face {
/* 字体名称,可自定义,就像定义一个class名称一样。*/
font-family: 'hdjx';
/* 字体文件的路径,除了 url()加载字体,也可以通过 local() 加载本地字体 */
src: url('./HDJXYT.ttf');
/* 字重,就像在普通css中使用它一样,可以选择bold等值 */
font-weight: normal; // 字重
/* 字体样式 */
font-style: normal; // 字体样式
}
复制代码
@font-face 支持多种字体备选,即是说当加载第一份字体失败时,会往下寻找。
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"),
local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
复制代码
3.注意事项
1.这里使用的Web fonts 仍然受到同域限制 (字体文件必须和调用它的网页同一域), 但可以使用 HTTP access controls 解除这一限制。
2.因为这里没有为 TrueType(ttf), OpenType(otf) 和 Web Open File Format(WOFF) 字体定义MIME,因此不能为这些字体类型设置特定的MIME(实际上WOFF的MIME将会是application/font-woff,但浏览器对此MIME的识别还不统一,其它字体情况也类似,可暂时使用application/octet-stream)。
3.你不能在一个 CSS 选择器中定义 @font-face 。例如,这样写是无效的
.className {
@font-face {
font-family: MyHelvetica;
src: local("Helvetica Neue Bold"), local("HelveticaNeue-Bold"),
url(MgOpenModernaBold.ttf);
font-weight: bold;
}
}
复制代码
本段落摘自 developer.mozilla.org
三、demo 示例
引入外部字体后的效果图
demo1:html版本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>外部字体使用示例</title>
<!-- @font-face 也可以写到 独立的css文件中 -->
<style>
@font-face {
font-family: "HDJXYT";
src: url('./HDJXYT.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HYQYTJ";
src: url('./HYQYTJ.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
</head>
<body>
<h1>外部字体使用示例</h1>
<h3>你好,这是默认字体</h3>
<h3 style="font-family: HDJXYT">你好,这是 汉鼎简新艺体</h3>
<h3 style="font-family: HYQYTJ">你好,这是 汉仪清韵体简</h3>
</body>
</html>
复制代码
demo2:vue版本
<template>
<div>
<h1>外部字体使用示例</h1>
<h3>你好,这是默认字体</h3>
<h3 style="font-family: HDJXYT">你好,这是 汉鼎简新艺体</h3>
<h3 style="font-family: HYQYTJ">你好,这是 汉仪清韵体简</h3>
</div>
</template>
<script>
export default {
name: 'FontDemo',
}
</script>
<!-- @font-face 也可以写到 独立的css文件中 -->
<style>
@font-face {
font-family: "HDJXYT";
src: url('../assets/font/HDJXYT.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: "HYQYTJ";
src: url('../assets/font/HYQYTJ.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
</style>
复制代码
四、@font-face 的浏览器兼容性
@font-face 的浏览器兼容良好,chrome4和ie4就支持了,可以放心使用,具体情况如下:
该图来自 developer.mozilla.org