Question

大家好，

我正在尝试做一个待办事项清单，在那里，我想将字体更改为外部字体，例如Montserrat或Roboto。不幸的是，我以内联方式使用CSS。我不确定如何添加外部CSS。通常，我复制并粘贴一个@import片段，如下所示：

@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编码时如何添加外部字体？

Answer 1

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

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

Answer 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
}

在React.js中将外部字体用于内联CSS

2 个答案: