时间戳

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

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

问题描述

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

我的要求是将这些字体中的每一个分配给不同的变量。并在我的应用程序中使用这些变量。我想将这些变量统称为“常规”、“中等”，因为如果我将其从其他字体系列更改为我的应用程序其他部分中的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..

标签： cssreactjsstyled-components

解决方案

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

您可以将 分配给font-familystyled-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。

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

请参阅此以获取更多信息：https ://styled-components.com/docs/advanced#theming

希望这可以帮助 ！

推荐阅读