如何使用 Styled-Components 设置全局字体系列答案

【问题标题】：How can set global font-family using Styled-Components如何使用 Styled-Components 设置全局字体系列
【发布时间】：2019-08-23 14:13:54
【问题描述】：

我想使用Styled-Components 全局设置font-family。我使用了createGlobalStyle并将字体设置为body，但是body里面的div没有继承字体。

这是我的 Styled-components 正文：

import {createGlobalStyle} from 'styled-components';

export const AppRoot = createGlobalStyle`
  body {
    @import url('../../font.css');
    font-family: Vazir !important;
    direction: rtl;
    text-align: right;
    cursor: default;
  }
`;

这是我的使用方法：

import {AppRoot} from './StyledComponents';

ReactDOM.render (
  <Fragment>
    <AppRoot/>
    <App />
  </Fragment>,
  document.getElementById ('root')
);

【问题讨论】：

标签： css reactjs styled-components

【解决方案1】：

我认为您可以使用 * 选择器而不是 body 来执行此操作。

export default createGlobalStyle`
        * {
            @import url('../../font.css');
            font-family: Vazir !important;
            // CSS you want global. 
        }
    
`

我用它创建了一个重置 css 来删除一些浏览器的规则。

【讨论】：

如果我使用@font-face { ... }，我该怎么做

【解决方案2】：

我的建议是用精确的格式覆盖值

在浏览器中，默认样式表以字体简写格式提及字体。尝试提供以下格式的字体，让我知道它是否有效。

 font: italic small-caps normal 13px/150% Vazir;

【讨论】：