Question

仅向标签添加className并没有帮助

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

不更改字体

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

Answer 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/9.6.1/css/fabric.min.css">

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

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

Answer 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>`
  );
}

我对https://github.com/OfficeDev/office-ui-fabric-react/wiki/Component-Styling#styling-best-practices的理解是，我需要使用getTheme()和styles（不是style）prop函数来进行样式设计。所以我仍在寻找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

Answer 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

如何在fabric-ui中更改字体

3 个答案: