时间戳

首页 > 解决方案 > 使用材质 UI 构建我的反应应用程序。我使用的字体在 Mac 中不一样

css - 使用材质 UI 构建我的反应应用程序。我使用的字体在 Mac 中不一样

问题描述

mac 和 iOS 平台的字体变化。如何确保出现相同的字体。我的 index.css 文件：

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
    sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

标签： cssreactjsfontsmaterial-ui

解决方案

您可以从本地存储库中获取字体并使用 font-face 来确保您的字体现在是从同一个存储库中读取的，而不是从设备中读取的。

下载您打算使用的字体并将它们放在 public/Fonts 目录中，然后在您的根 css 中添加这些字体，例如：

@font-face {
  font-family: 'Segoe UI';
  font-style: normal;
  font-weight: normal;
  src: local('Segoe UI'), url('SEGOE-UI.woff') format('woff');
}
{.....}

或/和您正在使用的任何其他字体

推荐阅读