您好,我想使用不同字体粗细的 Inter 字体(400、500、700)。现在它只加载国米常规。我正在使用带有 typescript 和样式组件的 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;
}
最佳答案
这就是我能够做到的
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
字体这是我的 Assets /字体
export {default as GalanoGrotesqueMedium} from './fonts/GalanoGrotesqueMedium.ttf'
export {default as GalanoGrotesqueRegular} from './fonts/GalanoGrotesqueRegular.ttf'
关于reactjs - 如何在样式组件中注册多个字体粗细?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/63344705/