TypeScript 字体导入，链接标签属性 crossorigin 错误

TypeScript font import, error with link tag property crossorigin

提问人：Rodrigo 提问时间：9/29/2021 最后编辑：Charles OuverleauxRodrigo 更新时间：10/24/2023 访问量：9276

问：

导入自定义字体（例如谷歌字体）时如何解决此 typscript 错误？

<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />

以下是错误的详细信息：

Type 'boolean' is not assignable to type 'string'.ts(2322)
index.d.ts(2279, 9): The expected type comes from property 'crossOrigin' which is declared here on type 'DetailedHTMLProps<LinkHTMLAttributes<HTMLLinkElement>, HTMLLinkElement>'

修复：

  • 属性为：crossOrigin，而不是 crossorigin（O 大写）
  • crossOrigin 接受字符串。如果你在你正在编写的链接标签中添加 crossOrigin，这是一个布尔值（期望 true 或 false），而它需要一个字符串。这就是为什么将其设置为 crossOrigin=“anonymous” 的原因<link ... crossOrigin />
  • 从 v10.2 开始，Next.js 具有内置的 Web 字体优化，这意味着您可以删除它并使其正常工作
打字稿 字体 下一页 .js

评论

7赞 brc-dd 9/29/2021
它不在 JSX 中（如错误所示）。此外，它接受字符串而不是布尔值。所以最好这样设置它：.此外，您不需要 Google 字体，因为从 v10.2 开始，Next.js 具有内置的 Web 字体优化。crossOrigincrossorigincrossOrigin="anonymous"
2赞 Rodrigo 9/29/2021
crossOrigin=“anonymous”对我有用
2赞 Gabriel Linassi 5/23/2022
在 jsx （React） 中，你必须像这样编写 camel-case： crossOrigin。现在你会看到一个错误，说它不能是布尔值，这是正确的。它必须是值 “”（空）、匿名或 use-credentials 的字符串。如果给定了任何其他值，则回退到匿名。意识到该脚本最初只是 crossorigin 而没有指定任何内容，因此您需要在 jsx 中编写此内容：crossOrigin=“” 或 crossOrigin=“anonymous” ref： developer.mozilla.org/en-US/docs/Web/HTML/Attributes/...

答：

7赞 Lucas Melo 9/29/2021 #1

您是否尝试编写 crossOrigin 而不是 crossOrigin？

评论

5赞 Rodrigo 9/29/2021
“crossorigin”，只有 crossOrigin 给了我同样的错误，我应该传递一些值吗？crossOrigin=“somevalue”，但哪个值？
1赞 Community 9/29/2021
正如目前所写的那样，你的答案尚不清楚。请编辑以添加其他详细信息，以帮助其他人了解这如何解决所提出的问题。您可以在帮助中心找到有关如何写出好答案的更多信息。
7赞 Rodrigo 5/24/2022
@Tirias它是 crossOrigin=“anonymous”
10赞 Tirias 5/25/2022
谢谢！也让错误消失了！crossOrigin="true"
2赞 jojemapa 3/8/2023
<link rel=“preconnect” href=“fonts.gstatic.com” crossOrigin=“anonymous” /> 对我来说，这有效。导入 Roboto 字体

上一个：开玩笑期望异常不适用于异步 [重复]

下一个：模拟访问公有 GCS 存储桶的结果