I use styled component
用于我的 ReactJS 应用程序上的库 css。我想要@font-face
但不工作。
code on GlobalStyle.js
import { createGlobalStyle } from 'styled-components';
import MaisonBook from '../assets/fonts/MaisonNeue-Book.ttf';
const GlobalStyle = createGlobalStyle`
@font-face {
font-family: Maison Nueue;
src: url(${MaisonBook});
}
@font-face {
font-family: Maison Nueue;
src: url('../assets/fonts/MaisonNeue-Bold.ttf');
font-weight: bold;
}
`
export default GlobalStyle;
on index.js
....
ReactDOM.render(
<React.StrictMode>
<GlobalStyle/>
<MainRouter />
</React.StrictMode>,
document.getElementById('root')
);
....
字体名称应放在引号中:font-family: 'Maison Nueue';
import { createGlobalStyle } from 'styled-components';
import MaisonBook from '../assets/fonts/MaisonNeue-Book.ttf';
const GlobalStyle = createGlobalStyle`
@font-face {
font-family: 'Maison Nueue';
src: url(${MaisonBook});
}
h1 {
font-family: 'Maison Nueue';
}
`
export default GlobalStyle;
and
....
ReactDOM.render(
<React.StrictMode>
<GlobalStyle/>
<h1>Is it works?</h1>
<MainRouter />
</React.StrictMode>,
document.getElementById('root')
);
....
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)