如何声明多个字体并将它们中的每一个分配给一个变量并在样式组件中访问它们

Question

我在 index.css 中使用 font-face 并在我的应用程序的其他地方访问这些字体系列。

我的要求是将这些字体中的每一个分配给不同的变量。并在我的应用程序中使用这些变量。我想将这些变量一般命名为“常规”、“中等”，因为如果我将其从 OpenSans 更改为其他字体系列，我不需要在我的应用程序的其他部分将字体系列作为 OpenSans 更改为其他。

我正在使用styled-components 进行样式设置。

@font-face{
  font-family: 'OpenSans';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/Fonts/OpenSans-Regular.ttf)
}

@font-face{
  font-family:'OpenSans-SemiBold';
  font-style: normal;
  font-weight: 400;
  src:url(./assets/Fonts/OpenSans-SemiBold.ttf)
}

@font-face{
  font-family:'OpenSans-SemiBoldItalic';
  font-style: normal;
  font-weight: 400;
  src:url(./assets/Fonts/OpenSans-SemiBoldItalic.ttf)
}

@font-face{
  font-family: 'Proxima Nova';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/Fonts/ProximaNova-Regular.ttf);
}

@font-face{
  font-family: 'Proxima Nova Medium';
  font-style: normal;
  font-weight: 400;
  src: url(./assets/Fonts/proxima-nova-medium.ttf);
} 

此外，一旦将这些字体分配给不同的变量，我如何访问其他组件的样式组件 例如：

const p = styled.p`
font-family: ??? --> is it using ${variable_name} ?
`

我对 index.css 的要求：

var Medium-font = {
    @font-face{
      font-family: 'Proxima Nova Medium';
      font-style: normal;
      font-weight: 400;
      src: url(./assets/Fonts/proxima-nova-medium.ttf);
    }    
  };

var Regulat-font = {
    @font-face{
      font-family: 'Proxima Nova';
      font-style: normal;
      font-weight: 400;
      src: url(./assets/Fonts/ProximaNova-Regular.ttf);
    }
  };

and so on..

Answer 1

您不需要将整个 font-face 分配给变量。字体不是你经常改变的东西。但即使你出于某种原因这样做...... font-face 仍然需要像 url 和 index.css 中字体本身的名称一样进行更改，但实际 css 中唯一的变化将是 font-family 属性。

您可以将 font-family 分配给 styled-components 中的变量，然后在任何地方使用它。这样，您只需在主题中的一处进行更改。

您可以使用ThemeProvider 来实现此目的。

// Some component
const Para = styled.p`
  font-family: ${props => props.theme.fontFamily1};
`;

const Para2 = styled.p`
  font-family: ${props => props.theme.fontFamily2};
`;


// Define what props.theme will look like
const theme = {
  fontFamily1: "OpenSans",
  fontFamily2: " Proxima Nova"
};

//render method of App.jsx or root app file
render(
  <div>
    <ThemeProvider theme={theme}>
      <Para>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Para>
      <Para2>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Para2>
    </ThemeProvider>
  </div>
);

<Para> 组件现在将具有字体 OpenSans 和 <Para2> Proxima Nova。 p>

如果您决定更改字体，只需相应地更改主题中的 fontFamily1/fontFamily2 属性，它将反映在使用该主题的所有组件中。

更多信息请参考：https://styled-components.com/docs/advanced#theming

希望这会有所帮助！