ant-design-mobile 字体未加载答案

【问题标题】：ant-design-mobile fonts not loadedant-design-mobile 字体未加载
【发布时间】：2019-12-04 05:44:28
【问题描述】：

我按照示例设置 ant-design-mobile 以进行反应，我使用的是 next.js - 样式已加载，但字体未加载。

我还提取了 HTML 并使用完整的 ant-design-mobile CSS 创建了纯 HTML 示例，但它也没有加载正确的字体。

看区别，字体来自官方ant-design-mobilebutton example

还有我示例中的字体

附：另外 - 非常奇怪 - 在官方 ant-design-mobile 文档中，他们建议不要加载完整的 CSS，但 in its own example 他们实际上包含了完整的 CSS

<!DOCTYPE html>
<html>

  <head>
    <meta charSet="utf-8" class="next-head" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no" />
    <link rel="stylesheet" type="text/css" href="http://unpkg.com/antd-mobile@2.2.8/dist/antd-mobile.min.css" />
  </head>

  <body>
    <a role="button" class="am-button" aria-disabled="false"><span>Start</span></a>
  </body>

</html>

【问题讨论】：

标签： antd

【解决方案1】：

删除 css 链接并将其添加到您的组件中

<head>
...
<style global jsx>{`
                    html,
                    body {
                        font-family: 'Segoe UI', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Helvetica Neue', Helvetica, Arial, sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol';
                        margin: 0;
                    }
`}</style>
 ...
</head>

【讨论】：