如何在样式组件中注册多个字体粗细？

Posted 2023-02-21

【中文标题】如何在样式组件中注册多个字体粗细？

【英文标题】：How to register multiple font weights in styled-components?

【发布时间】：2020-11-30 07:46:43

【问题描述】：

您好，我想使用不同字体粗细的 Inter 字体（400、500、700）。现在它只加载国米常规。我正在使用带有 typescript 和 styled-components 的 create-react-app。

全局样式：

export const GlobalStyle = createGlobalStyle`
  @font-face 
     font-family: 'Inter';
     src: url($Inter) format("truetype"),
     url($InterWoff) format("woff"),
     url($InterWoff2) format("woff2");
     font-weight: normal;
     font-style: normal;
  ;
  @font-face 
    font-family: 'Inter';
    src: url($InterMedium) format('truetype')
    url($InterMediumWoff) format('woff'),
    url($InterMediumWoff2) format('woff2');
    font-weight: 500;
    font-style: normal;
  ;
  @font-face 
    font-family: 'Inter';
    src: url($InterBold) format('truetype')
    url($InterBoldWoff) format('woff'),
    url($InterBoldWoff2) format('woff2');
    font-weight: bold;
    font-style: normal;
  
  body 
  margin: 0;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  

【问题讨论】：

你能弄清楚吗？

你从哪里得到字体？您是下载它还是从外部来源（如 google-fonts）导入它？

【参考方案1】：

这就是我能够做到的方式

import  createGlobalStyle  from 'styled-components'
import  GalanoGrotesqueMedium, GalanoGrotesqueRegular  from 'assets/fonts'

const GlobalStyles = createGlobalStyle`
    @font-face 
        font-family: 'GalanoGrotesqueRegular';
        src: url($GalanoGrotesqueRegular) format('truetype');
    
    @font-face 
        font-family: 'GalanoGrotesqueMedium';
        src: url($GalanoGrotesqueMedium) format('truetype');
    
    * 
        font-family: 'GalanoGrotesqueRegular';
    
`

export default GlobalStyles

我在哪里导入 .ttf 字体

这是我的资产/字体

export default as GalanoGrotesqueMedium from './fonts/GalanoGrotesqueMedium.ttf'
export default as GalanoGrotesqueRegular from './fonts/GalanoGrotesqueRegular.ttf'

【参考方案2】：

根据您的代码，我会尝试命名不同的字体，然后将它们添加到字体系列中，如下所示：

export const GlobalStyle = createGlobalStyle`
  @font-face 
     font-family: 'Inter-Regular';
     src: url($Inter) format("truetype"),
     url($InterWoff) format("woff"),
     url($InterWoff2) format("woff2");
     font-weight: normal;
     font-style: normal;
  ;
  @font-face 
    font-family: 'Inter-500';
    src: url($InterMedium) format('truetype')
    url($InterMediumWoff) format('woff'),
    url($InterMediumWoff2) format('woff2');
    font-weight: 500;
    font-style: normal;
  ;
  @font-face 
    font-family: 'Inter-Bold';
    src: url($InterBold) format('truetype')
    url($InterBoldWoff) format('woff'),
    url($InterBoldWoff2) format('woff2');
    font-weight: bold;
    font-style: normal;
  
  body 
  margin: 0;
  font-family: 'Inter-Regular', 'Inter-500', 'Inter-Bold', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans',
    'Droid Sans', 'Helvetica Neue', sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  

【参考方案3】：

这就是我的做法：

fontsCSS.ts

import  css  from "styled-components";

export const fontsCSS = css`
  @font-face 
    font-family: "Inter";
    src: url('/fonts/Inter-Regular.ttf');
    font-weight: normal;
    font-style: normal;
    font-display: block;
  
  @font-face 
    font-family: "Inter";
    src: url('/fonts/Inter-Semibold.ttf');
    font-weight: bold;
    font-style: normal;
    font-display: block;
  
`;

GlobalStyles.ts

import  createGlobalStyle  from "styled-components";

import  resetCSS  from "@styles/resetCSS";
import  baseCSS  from "@styles/baseCSS";
import  fontsCSS  from "@styles/fontsCSS";

const GlobalStyles = createGlobalStyle`
  $resetCSS
  $baseCSS
  $fontsCSS
`;

export default GlobalStyles;

App.tsx

import React from "react";
import  theme  from "@styles/theme";
import  ThemeProvider  from "styled-components";
import GlobalStyles from "@styles/GlobalStyles";

interface App 

const App: React.FC<App> = (props) => 
  console.log("Rendering App...");

  return(
    <ThemeProvider theme=theme>
      <GlobalStyles/>
      <RestOfTheApp/>
    </ThemeProvider>
  );
;

export default React.memo(App);

【参考方案4】：

在字体系列声明中使用准确的字体粗细，而不是正常的粗体。 使用字体系列时，也要声明字体粗细。浏览器会根据 font-family 和 font-weight 的组合选择正确的字体文件。