如何在前端项目中使用出色的开源字体如何在前端项目中使用出色的第三方字体,本文提供了字体来源,字体文件格式,加载字体资源以

字体来源

google fonts

Google Fonts 是一个由 Google 提供的免费字体库，它的一个主要优点是它的开源性质，这意味着设计师和开发者可以自由地使用和分享这些字体，而无需担心版权问题。
值得注意的是, Google Fonts对中文字体的支持不够丰富.一些常见的中文字体如宋体,楷体,行书等,无法在 Google Fonts 中找到.

猫啃网

猫啃网致中分享了大量无版权问题的免费商用字体, 弥补了 Google Fonts 对中文字体支持不够丰富的缺陷

github

一些开源的repo 中整理了字体相关的资源,如 cn-fontsource

方正字库

方正字库也有四款可以免费商用的字体，分别是「方正黑体」、「方正仿宋」、「方正楷体」、「方正书宋」

字体文件格式

ttf

TTF 是 TrueType Font 的缩写，它是一种常见的字体文件格式。TrueType 是由苹果公司在 1980 年代末开发的，后来被微软公司采用并进行了一些扩展。TTF 字体是一种可以在多种操作系统（包括 Windows、Mac OS 和许多 Linux 发行版）上使用的字体格式。

woff2

WOFF2，全称 Web Open Font Format 2，是一种用于在网页上使用的字体格式。它是 WOFF 的升级版本，由 W3C（万维网联盟）标准化。

WOFF2 字体格式的主要优点是它具有更高的压缩效率，通常可以比其前身 WOFF 或其他字体格式（如 TTF 或 OTF）更有效地减少字体文件的大小。这使得 WOFF2 字体能够更快地加载到网页上，从而提高了网页的性能。

otf

OTF 是 OpenType Font 的缩写，它是一种字体文件格式。OpenType 是由微软公司和 Adobe 共同开发的，旨在替代早期的 TrueType 和 PostScript Type 1 字体格式。

TTF 使用二次贝塞尔曲线来定义字形，而 OTF（基于 PostScript）使用三次贝塞尔曲线。这在大多数情况下不会导致可见的差异，但在某些情况下，OTF 可能会提供更准确的曲线。
由于 OTF 使用的是三次贝塞尔曲线，所以 OTF 文件通常比相同的 TTF 文件稍大一些

加载字体资源

使用 webfontloader

webfontloader 会帮助你自动下载字体文件,并且通过在<head>中添加<link>标签的方式将字体加载到项目中.值得注意的是, 如果调用多次接口,相同资源会被重复下载和加载(重复添加标签到项目中).所以最好调用前先判断项目中是否已经加载过资源.

当通过 @font-face 使用链接字体时,Web Font Loader 提供了更多的控制能力。

它提供了一个通用的接口来加载字体，然后添加了一套可用于控制加载体验的标准事件。

Web Font Loader 能够从 Google Fonts、Typekit、Fonts.com 和 Fontdeck 加载字体，也可以加载自托管的网页字体。

import WebFont from 'webfontloader';

export const loadFontList = (newFontList: string[]) => {
  return new Promise((resolve, reject) => {
    if (newFontList?.length > 0) {
      WebFont.load({
        google: {
          families: newFontList,
        },
        fontactive: () => {
          resolve('success');
        },
        fontinactive: () => {
          reject(new Error('load font fail'));
        },
      });
    } else {
      resolve('success');
    }
  });
};

const map: { [key: string]: boolean } = {};
const loadFont = async (value: string) => {
    if (!value) return;

    // 判断资源是否已经加载
    if (document.querySelectorAll(`link[href*="${value}" i]`).length) return;

    try {
        if (!map[value]) {
        await loadFontList([value]);
        map[value] = true;
        }
    } catch (error) {
        console.error(error);
    }
};

使用 react-helmet

使用react-helmet的好处是,即使多次渲染 helmet组件,相同资源也不会被重复加载

React Helmet 是一个可重用的 React 组件，用于处理 HTML 文档的 head 部分。它允许你在 React 应用中动态设置网页标题、meta 标签，或者任何其他你想添加到 head 的元素。

export const getFontUrl = (fontList: any[]) => {
  if (!fontList.length) return;

  const BASE_URL = 'https://fonts.googleapis.com/css?family=';
  const newFontList = fontList
    .filter((font) => typeof font === 'string')
    ?.map((font) => font.replace(/ /g, '+'))
    .join('|');

  // eslint-disable-next-line consistent-return
  return `${BASE_URL}${newFontList}`;
};

export function FontFamilyHelmet() {
  return (
    <Helmet>
      <link rel="stylesheet" href={getFontUrl(defaultFonts)} />
      {...chineseFonts.map((font) => <link rel="stylesheet" href={font.link} />)}
    </Helmet>
  );
}

项目中引用字体文件

下载对应字体文件到项目中

使用@font-face 规则来加载字体文件

@font-face {
    font-family: 'MyCustomFont'; // 字体名称可以自定义
    src: url('path/to/your/fontfile.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

使用对应字体

body {
 font-family: 'MyCustomFont', fallback, sans-serif;
}

使用字体时推荐加载多个备选字体,字符串用,分割

font-family: Google Sans, -apple-system, BlinkMacSystemFont, sans-serif;

查看浏览器当前字体

使用查看元素检查含字体样式的元素
computed 列拉到最下面有相关字体信息包括:
1. Family name
2. PostScript name
3. Font origin