什么是正确的 Fabric Core CSS 参考？

编程问答 2022-05-22

问题描述

Fabric Core getting started guide 表示使用以下样式表：

从下面的CodePen可以看出，它根本不起作用！！我错过了什么？

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

<body class="ms-fabric">
  <div class="ms-depth-8"><span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span></div>
  <div class="ms-font-su ms-font-xl">xl font</div>
  <div class="ms-font-su ms-font-xxl">xxl font</div>
  <div class="ms-fontSize-16">16 font</div>
  <div class="ms-fontSize-42">42 font</div>
  <br />

  <button class="ms-Button">
    <span class="ms-Button-label">Create account</span>
    <span class="ms-Button-description">Description of the action this button takes</span>
  </button>
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Create account</span>
    <span class="ms-Button-description">Description of the action this button takes</span>
  </button>
</body>

如果我引用旧的 Fabric 链接，我还有另一个 CodePen 可以工作：

https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css

https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css

<Head>
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.min.css" />
  <link rel="stylesheet" href="https://appsforoffice.microsoft.com/fabric/2.2.0/fabric.components.min.css" />
</Head>

<body class="ms-fabric">
  <div class="ms-depth-8"><span class="ms-font-su ms-fontColor-themePrimary">Big blue text</span></div>
  <div class="ms-font-su ms-font-xl">xl font</div>
  <div class="ms-font-su ms-font-xxl">xxl font</div>
  <div class="ms-fontSize-16">16 font</div>
  <div class="ms-fontSize-42">42 font</div>
  <br />

  <button class="ms-Button">
    <span class="ms-Button-label">Create account</span>
    <span class="ms-Button-description">Description of the action this button takes</span>
  </button>
  <button class="ms-Button ms-Button--primary">
    <span class="ms-Button-label">Create account</span>
    <span class="ms-Button-description">Description of the action this button takes</span>
  </button>
</body>

文档有误吗？

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

fluent-uioffice-ui-fabric