内联 fontFamily 在 React / Next.js 9 中不起作用

Posted 2023-02-22

【中文标题】内联 fontFamily 在 React / Next.js 9 中不起作用

【英文标题】：Inline fontFamily not working in React / Next.js 9

【发布时间】：2020-10-23 06:47:17

【问题描述】：

问题描述

我有一个 Next.js 应用程序，我正在尝试使用内联样式来更改 <p> 元素的字体系列。这不起作用，但如果我尝试应用 color: 'red' 样式，它就可以正常工作。

这是我正在使用的：

export default () => 
    return (
        <div>
            <p style= fontFamily: 'system-ui' >Hello from Next.js</p>
        </div>
    )

预期结果

<p> 元素的字体系列更改为 system-ui。

实际结果

文本已渲染，但字体系列仍为浏览器默认设置。

package.json

  "dependencies": 
    "next": "9.4.4",
    "react": "16.13.1",
    "react-dom": "16.13.1"
  

节点版本

> node -v
v14.5.0

浏览器：Firefox 77、Windows 10

问题：为什么我的 fontFamily 内联样式没有正确应用？

【问题讨论】：

CSS 中没有默认的字体系列“sanserif”。应该是sans-serif。

我的错，我的意思是发布 system-ui 不起作用。我已经编辑了问题。

通常，该字体系列将用于重置或其他一些基本站点或页面样式以及其他集合。 system-ui 适用于某些浏览器，但不是全部。 caniuse.com/#search=system-ui

@jme11 谢谢，我大部分时间都在使用 Google Chrome 浏览器，它运行良好，但对于我的培训工作，我使用 Firefox。这似乎是我的问题。为帮助干杯

【参考方案1】：

那里看起来像是一个错字。试试sans-serif 而不是sanserif。

另外，请确保您的网络浏览器支持 system-ui 字体 https://caniuse.com/#feat=font-family-system-ui

【讨论】：

谢谢，很好的标注。我实际上遇到了system-ui 的问题。出于某种原因，这不起作用，但sans-serif 可以。我编辑了问题。

我尝试在代码和框中对system-ui 字体系列使用内联样式。它似乎工作正常（codesandbox.io/s/react-boilerplate-ofcpg?file=/src/index.js）。你能检查一下你的浏览器是否首先支持它吗？ caniuse.com/#feat=font-family-system-ui（这可能有助于您参考）。

你是对的。前几天在 Google Chrome 中运行良好，但对于我的演示工作，我使用的是 Firefox。看起来这是我的问题。