如何在前端项目中使用出色的开源字体

#字体来源

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

• 当通过 @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('|');

  
  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>
  );
}

#项目中引用字体文件

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

2. 使用@font-face 规则来加载字体文件```javascript @font-face { font-family: 'MyCustomFont'; src: url('path/to/your/fontfile.ttf') format('truetype'); font-weight: normal; font-style: normal; }

   复制

3. 使用对应字体```javascript body { font-family: 'MyCustomFont', fallback, sans-serif; }

   复制
   使用字体时推荐加载多个备选字体,字符串用,分割```js
   font-family: Google Sans, -apple-system, BlinkMacSystemFont, sans-serif;
   

#查看浏览器当前字体

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