如何在fabric-ui中更改字体答案

【问题标题】：How to change the font in fabric-ui如何在fabric-ui中更改字体
【发布时间】：2021-05-27 04:22:14
【问题描述】：

仅在标签中添加className 没有帮助

                        <p className="ms-font-m">
                            sometext
                        </p>

不改变字体

https://developer.microsoft.com/en-us/fabric#/styles/typography

【问题讨论】：

标签： office-ui-fabric

【解决方案1】：

如果您想直接使用 Fabric Core CSS 类，而不是使用 CSS-in-JS，则需要按照getting started with Fabric Core 的说明在页面中包含 CSS：

在页面的<head> 中添加对样式表的引用。最简单的方法是使用 Microsoft CDN 上的副本（直接从上面链接的文档中获取 URL 以获取最新版本）：

<link rel="stylesheet" href="https://static2.sharepointonline.com/files/fabric/office-ui-fabric-core/10.0.0/css/fabric.min.css">

将ms-Fabric 类添加到包含元素，例如<body>，以设置字体系列。然后您可以使用其他类来设置尺寸和颜色：

<body class="ms-Fabric">
  <span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span>
</body>

【讨论】：

我认为 css-in-js 是推荐的 css 方式。你能对此发表评论吗？你会支持两者吗？谢谢
css-in-js 是推荐的，但是如果你想使用 CSS 类名，这是怎么做的。我不确定继续支持两者的计划是什么。

【解决方案2】：

不完全是我想要的，但这是一种方法：

https://github.com/OfficeDev/office-ui-fabric-react/blob/86337324a5fd8b522855eb8bdcbf012a868a26ba/packages/styling/README.md#using-fabric-core-classes

import {
  ColorClassNames,
  FontClassNames
} from '@uifabric/styling';

function renderHtml() {
  return (
    `<div class="${ [
      ColorClassNames.themePrimary,
      FontClassNamed.medium
      ].join(' ') }">Hello world!</div>`
  );
}

我对@987654322@ 的理解是，我需要使用getTheme() 和styles（不是style）道具功能来进行造型的新方法。所以我还在寻找getTheme() 的解决方案

==============

这里是可用字体列表

https://github.com/OfficeDev/office-ui-fabric-react/blob/1b9405b3b64839975e16ee1fad04d7868d9e3b99/packages/styling/src/styles/fonts.ts

字体可视化：https://developer.microsoft.com/en-us/fabric#/styles/typography

颜色：https://developer.microsoft.com/en-us/fabric#/styles/colors

【讨论】：

你找到合适的方法来使用 css-in-js 更改默认字体了吗？我想把默认的 Segoe 字体换成 Arial。

【解决方案3】：

你可以在加载主题时添加如下代码：

加载主题（{ defaultFontStyle: { fontFamily: 'Comic Sans MS', fontWeight: 'bold' }, ………… 这是从 office-ui-fabric-react 7.21.0 版开始提供的

这些是您可以找到错误发布和报告的网址： https://github.com/microsoft/fluentui/issues/7416 https://github.com/microsoft/fluentui/releases/tag/office-ui-fabric-react_v7.21.0 https://github.com/microsoft/fluentui/pull/9981

【讨论】：