在 React.js 中为内联 CSS 使用外部字体答案

【问题标题】：Use external font for inline CSS in React.js在 React.js 中为内联 CSS 使用外部字体
【发布时间】：2019-02-25 04:41:33
【问题描述】：

大家好，

我正在尝试在 react 中创建一个待办事项列表，并在其中将字体更改为外部字体，例如 Montserrat 或 Roboto。不幸的是，我以内联方式使用 CSS。我不确定如何添加外部 CSS。通常，我复制并粘贴一个@import sn-p，如下所示：

@import url('https://fonts.googleapis.com/css?family=Roboto');

这是我的 TodoItem 代码（单个待办事项的文件）

import React from 'react'

function TodoItem(){
    const styleSpan = {
        fontSize:50,
        fontFamily:"Roboto",
        borderRadius:10
    }
    const styleCheckbox = {
        width:50,
        height:50,
        marginRight:50,
        backgroundColor:"#edc2d6",

    }
    return(
        <div>

            <input type = "checkbox" style = {styleCheckbox}></input>
            <span style={styleSpan}>Todo item here</span>
        </div>
    )
}

export default TodoItem

要使用内联 CSS，您必须将样式选项放在对象中。当您有两个相关值时，这可以工作，但对于单个值几乎是不可能的。

在编码内联 CSS 时如何添加外部字体？

【问题讨论】：

标签： javascript reactjs ecmascript-6 jsx

【解决方案1】：

您可以在父 css 文件中导入 css 并更改字体系列。

已创建DEMO。在这个演示中，我在 style.css 文件中导入了 css，并将 font-family 更改为 Roboto

【讨论】：

谢谢brk，但可以使用我拥有的代码

【解决方案2】：

在编码内联 CSS 时如何添加外部字体？

你可以试试这样的 -

<div>
  <style
    dangerouslySetInnerHTML={{
      __html: `
        @font-face {
            font-family: 'AdamGorry-Lights';
            src: url(url-to-font) format('woff2');
            font-weight: 300;
            font-style: normal;
        }
      `,
    }}
  />
  <input type="checkbox" style={styleCheckbox}></input>
  <span style={styleSpan}>Todo item here</span>
</div>

这允许你在样式中使用它

const styleSpan = {
   fontSize: 50,
   fontFamily: 'AdamGorry-Lights',
   borderRadius: 10
}

【讨论】：