代码之家 › 专栏 › 技术社区 › kirill_igum jfriend00

如何在fabric ui中更改字体

office-ui-fabric

0

kirill_igum jfriend00 · 技术社区 · 7 年前

只是添加一个 className

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

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

2 回复 | 直到 7 年前

1

ecraig12345 Doug Neiner 7 年前

如果您想直接使用Fabric核心CSS类,而不是使用JS中的CSS,则需要按照 getting started with Fabric Core :

<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>

2

0

kirill_igum jfriend00 7 年前

不完全是我想要的,但这里有一种方法:

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 )道具功能的新方式做造型。所以我还在找一个 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

3

0

ManoloCoria 5 年前

加载主题时,可以通过添加以下代码来完成此操作:

defaultFontStyle:{fontFamily:'Comic Sans MS',fontWeight:'bold'}, 这是自7.21.0版office ui fabric react开始提供的

以下是您可以找到bug发布和报告的URL: 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