如何在样式组件中使用字体粗细和字体系列？

【问题标题】：How to use font-weight and font-family in styled components?如何在样式组件中使用字体粗细和字体系列？
【发布时间】：2020-09-23 15:42:48
【问题描述】：

当我在创建样式组件时尝试使用 font-weight 和 font-family 时，没有任何反应。使用样式组件时，是否有一些特定的方法来设置字体粗细和字体系列？

感谢任何帮助。提前致谢。

export const H3 = styled.h3`
  font-size: ${fontsize.H3FONTSIZE};
  font-weight: 700;
  font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;

【问题讨论】：

标签： reactjs typescript styled-components tsx

【解决方案1】：

你所拥有的一切都很好。

完整示例

import React, { Component } from 'react';
import { render } from 'react-dom';
import styled from 'styled-components';

const fontsize = {
  H3FONTSIZE: '400px',
}

export const H3 = styled.h3`
  font-size: ${fontsize.H3FONTSIZE};
  font-weight: 10000;
  font-family: "museo", Helvetica Neue, Helvetica, sans-serif;
`;

class App extends Component {
  render() {
    return (<H3>Hello</H3>)
  }
}

render(
  <App />,
  document.getElementById('root')
)

演示：https://stackblitz.com/edit/styled-components-rbd4xo?file=index.js

【讨论】：