当网页在加载特殊字体时,如果该字体还没有在用户的计算机上,那么浏览器将会按顺序寻找其他字体进行替代,导致最终呈现效果可能和设计时有很大差别。而 FontFace 对象正是 JavaScript 中用来加载自定义字体文件,并在用户计算机上注册该字体的工具之一。
使用 FontFace
FontFace
的语法如下:
const font = new FontFace('font-family-name', 'URL-to-the-font-file', options);
font-family-name
: 类似于 CSS 字体规则中的 font-family,用于指定该字体的名称,后面的 CSS 中可以通过该名称来指定使用该字体。URL-to-the-font-file
: 指定字体文件的 URL 路径,可以是相对路径或绝对路径。-
options
: 一个可选的字体选项对象,可以包含多种自定义属性,如字体的格式、字体文件的描述信息等。 -
使用
fetch()
函数来加载字体文件并解析成ArrayBuffer
,然后通过FontFace()
函数实例化 FontFace 对象:
async function loadFont() {
const result = await fetch('font.ttf');
const fontBuffer = await result.arrayBuffer();
const font = new FontFace('Open Sans', fontBuffer);
document.fonts.add(font);
document.body.style.fontFamily = 'Open Sans';
}
loadFont();
- 将 FontFace 对象添加到
document.fonts
中,这样可以确保在字体成功加载并且被用户浏览到前,该字体不会应用到任何文本上。在将字体添加到font-style
上后,可以在 CSS 文件的字体样式中使用它。此处document.body.style.fontFamily
用于验证字体是否已成功加载。
FontFace 示例
下面是两个示例说明 FontFace 的使用方式:
示例1:加载单一字重的普通字体
(async () => {
const font = new FontFace('Roboto', 'url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmWUlfBBc9.ttf)');
await font.load();
document.fonts.add(font);
const header = document.querySelector('h1');
header.style.fontFamily = 'Roboto, sans-serif';
})();
- 在这个示例中,我们使用
FontFace
对象来加载一个 Google 字体库中的单一字重Roboto-Regular
。 - 使用
load()
方法等待字体加载完成,然后使用add()
方法将字体添加至document.fonts
集合。 - 最后,在 CSS 中使用刚加载的字体。
示例2:加载多个字体文件的变体字体
(async () => {
// 此示例中我们加载了 Google Fonts 中的 Lato 字体所有的变体,含有 400、400i、700、700i 以及 900 变体
const fontWeights = {
'Lato_Regular': 'https://fonts.gstatic.com/s/lato/v17/S6u8w4BMUTPHh6UVSwiPHA3q5d0.ttf',
'Lato_Italic': 'https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsIPxA.ttf',
'Lato_Bold': 'https://fonts.gstatic.com/s/lato/v17/S6uyw4BMUTPHjxAwXiWtFCfQ7A.ttf',
'Lato_BoldItalic': 'https://fonts.gstatic.com/s/lato/v17/S6u_w4BMUTPHjxsI9w2_FQ.ttf',
'Lato_Black': 'https://fonts.gstatic.com/s/lato/v17/S6u9w4BMUTPHh7USew-FGCWc.ttf'
};
const fonts = [];
// 创建 FontFace 对象并将其添加到字体文件数组中。
Object.keys(fontWeights).forEach((key) => {
const fontFile = fontWeights[key];
const font = new FontFace(key, `url(${fontFile})`);
fonts.push(font);
});
// 依次加载并等待加载完成后添加到文本样式中。
for (const font of fonts) {
await font.load();
document.fonts.add(font);
}
const header = document.querySelector('h1');
header.style.fontFamily = 'Lato_Regular';
header.style.fontWeight = 'bold';
header.style.fontSize = '2rem';
const subHeader = document.querySelector('p');
subHeader.style.fontFamily = 'Lato_Italic';
})();
在这个示例中,我们加载了 Google 字体库中的 Lato 字体的全部变体字体。在字体文件对象中,不同字体权重的字体文件 URL 路径被分配一个属性名 key
,然后一起被添加到字体数组 fonts
中。然后使用 for...of
循环等待每个字体都加载完成之后,再通过设置 CSS 样式应用并显示字体。
总体而言,使用 FontFace 对象使我们可以加载自定义字体并使用它们来呈现文本,从而使网页设计变得更加独特和美观。
本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:JavaScript中FontFace对象的使用方式 - Python技术站