顺风 CSS 自定义字体在其他设备上不起作用

Question

当我部署我的网站并试图在手机上打开它时，我发现本地机器的自定义字体问题不起作用，我一直在寻找使字体在全球范围内起作用的解决方案，但无济于事。以下是我对问题原因的假设：

1. 在我用来开发web的pc中，无论是在开发阶段还是在生产阶段，自定义字体都能像我预期的那样工作。但当我使用手机时，情况有所不同，这可能是因为我的手机还没有在本地机器上安装字体(因为我需要先在电脑上安装自定义字体才能使本地字体正常工作(

使用本地字体时是否会出现这种行为？如果是，在不需要在每个设备上安装字体的情况下，让字体在所有设备上都能工作的最佳方法是什么？如果没有，您认为是什么原因导致了这个问题？

如有任何帮助，我们将不胜感激。

Answer 1

您可以使用谷歌字体作为替代

• 在main.css 中

  @import url('font-from-google-font');
  @tailwind base;
  @tailwind components;
  @tailwind utilities;
  

• 在tailwind.config.js 中

  module.exports = {
  content: ['./src/**/*.{js,jsx,ts,tsx}'], // example with react
  theme: {
  fontFamily: {
  sans: ['your-font-google'],
  },
  extend: {},
  },
  plugins: [],
  };
  

Tailwind字体系列文档：https://tailwindcss.com/docs/font-family