如何实现无需导入或下载即可在CSS中调用多字体（含Google Fonts）？

针对你用React开发字体选择器、实现页面字体切换的需求，完全可以通过**动态加载Web字体（比如Google Fonts）**来实现，不用提前导入或下载资源，具体方案如下：

核心思路 #

当用户选中某个字体名称后，动态创建<link>标签加载对应的Google Fonts资源，等字体加载完成后，直接给页面根元素设置字体样式。

React组件实现示例 #

import { useState } from 'react';

const FontPicker = () => {
  const [selectedFont, setSelectedFont] = useState('Arial');

  const handleFontChange = (fontName) => {
    setSelectedFont(fontName);
    
    // 区分系统字体和Web字体
    const systemFonts = ['Arial', 'Times New Roman', 'Helvetica', 'Verdana'];
    if (systemFonts.includes(fontName)) {
      document.documentElement.style.fontFamily = `"${fontName}", sans-serif`;
      return;
    }

    // 动态加载Google Fonts
    const encodedFontName = encodeURIComponent(fontName);
    const link = document.createElement('link');
    link.href = `https://fonts.googleapis.com/css2?family=${encodedFontName}&display=swap`;
    link.rel = 'stylesheet';
    
    // 避免重复加载同一字体
    const existingLink = document.querySelector(`link[href*="${encodedFontName}"]`);
    if (!existingLink) {
      document.head.appendChild(link);
    }

    // 等待字体加载完成后应用，避免页面闪烁
    link.onload = () => {
      document.documentElement.style.fontFamily = `"${fontName}", sans-serif`;
    };
  };

  return (
    <div>
      <select 
        value={selectedFont}
        onChange={(e) => handleFontChange(e.target.value)}
        style={{ padding: '8px', fontSize: '16px' }}
      >
        <option value="Arial">Arial</option>
        <option value="Roboto">Roboto</option>
        <option value="Open Sans">Open Sans</option>
        <option value="Montserrat">Montserrat</option>
        <option value="Lato">Lato</option>
        {/* 可添加更多Google Fonts官方字体名称 */}
      </select>
    </div>
  );
};

export default FontPicker;

关键细节 #

1. 避免重复加载：每次加载前检查页面是否已有对应字体的<link>标签，防止重复添加资源。
2. 系统字体兼容：像Arial这类系统自带字体，无需加载Web资源，直接设置字体即可。
3. 字体名称匹配：下拉选项里的字体名称必须和Google Fonts官方名称完全一致（比如"Open Sans"不能写成"OpenSans"），可去官网整理完整的字体名称列表。
4. 加载优化：通过link.onload监听加载完成事件，等字体真正加载好再应用，避免页面出现字体闪烁问题。

内容的提问来源于stack exchange，提问作者Talha