我想在网页中使用Google字体,因此我将链接放在该部分中。
<link href="https://fonts.googleapis.com/css?family=Bungee+Inline" rel="stylesheet">
并设置CSS
<style> body{ font-family: 'Bungee Inline',cursive; } </style>
但是,它不起作用。
我怎么解决这个问题?
@import url(‘https://fonts.googleapis.com/css?family=Source Sans Pro:regular,bold,italic& subset = latin,latin-ext’);
您不需要包含任何类型的@ font-face等。您从Google的API中获得的响应已准备就绪,并允许您像平常一样使用字体系列。
然后在你的主要React应用程序JavaScript中,在顶部放置如下内容:
import’./assets/css/fonts.css’;
我实际上做了一个app.css导入fonts.css与几个字体导入。只是为了组织(现在我知道我的所有字体都在哪里)。要记住的重要一点是先导入字体。
请记住,导入到React应用程序的任何组件都应在导入样式后导入。特别是如果这些组件也导入自己的样式。这样您就可以确定样式的顺序。这就是为什么最好在主文件的顶部导入字体(不要忘记检查你的最终捆绑的CSS文件,以仔细检查你是否遇到麻烦)。
您可以通过Google Font API提供一些选项,以便在加载字体等时更高效。请参阅官方文档:https://developers.google.com/fonts/docs/getting_started
编辑,注意:如果您正在处理“离线”应用程序,那么您可能确实需要下载字体并通过Webpack加载。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。