字体来源

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 加载字体，也可以加载自托管的网页字体。

 1import WebFont from 'webfontloader';
 2
 3export const loadFontList = (newFontList: string[]) => {
 4  return new Promise((resolve, reject) => {
 5    if (newFontList?.length > 0) {
 6      WebFont.load({
 7        google: {
 8          families: newFontList,
 9        },
10        fontactive: () => {
11          resolve('success');
12        },
13        fontinactive: () => {
14          reject(new Error('load font fail'));
15        },
16      });
17    } else {
18      resolve('success');
19    }
20  });
21};

 1const map: { [key: string]: boolean } = {};
 2const loadFont = async (value: string) => {
 3    if (!value) return;
 4
 5    
 6    if (document.querySelectorAll(`link[href*="${value}" i]`).length) return;
 7
 8    try {
 9        if (!map[value]) {
10        await loadFontList([value]);
11        map[value] = true;
12        }
13    } catch (error) {
14        console.error(error);
15    }
16};

使用 react-helmet

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

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

 1export const getFontUrl = (fontList: any[]) => {
 2  if (!fontList.length) return;
 3
 4  const BASE_URL = 'https://fonts.googleapis.com/css?family=';
 5  const newFontList = fontList
 6    .filter((font) => typeof font === 'string')
 7    ?.map((font) => font.replace(/ /g, '+'))
 8    .join('|');
 9
10  
11  return `${BASE_URL}${newFontList}`;
12};
13
14export function FontFamilyHelmet() {
15  return (
16    <Helmet>
17      <link rel="stylesheet" href={getFontUrl(defaultFonts)} />
18      {...chineseFonts.map((font) => <link rel="stylesheet" href={font.link} />)}
19    </Helmet>
20  );
21}

项目中引用字体文件

下载对应字体文件到项目中
使用@font-face 规则来加载字体文件```javascript @font-face { font-family: ‘MyCustomFont’; src: url(‘path/to/your/fontfile.ttf’) format(‘truetype’); font-weight: normal; font-style: normal; }

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

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

查看浏览器当前字体

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