如何在VueJS应用中使用Google Web字体？
里昂·加班
我确实找到了这个插件https://github.com/gabiseabra/google-fonts-webpack-plugin
更新了由入门工具包生成的babel.config.js：
const GoogleFontsPlugin = require('google-fonts-webpack-plugin')
module.exports = {
presets: [
'@vue/app',
],
plugins: [
new GoogleFontsPlugin({
fonts: [
{ family: 'Inconsolata' },
{ family: 'Oswald' },
],
/* ...options */
}),
],
};
将字体添加到#app类中
<template>
<div id="app">
<div id="nav">
<router-link to="/">Home</router-link> |
<router-link to="/about">About</router-link>
</div>
<router-view/>
</div>
</template>
<style lang="scss">
#app {
font-family: 'Inconsolata', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
但是字体仍然是Arial：
https://fonts.google.com/specimen/Inconsolata?selection.family=Inconsolata
里昂·加班
刚刚弄清楚，我必须像这样导入它：
<style lang="scss">
@import url('https://fonts.googleapis.com/css?family=Inconsolata|Oswald');
#app {
font-family: 'Inconsolata', sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
}
#nav {
padding: 30px;
a {
font-weight: bold;
color: #2c3e50;
&.router-link-exact-active {
color: #42b983;
}
}
}
</style>
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
编辑于
相关文章
Related 相关文章
- 1
使用require.js字体插件加载Google Web字体
- 2
如何在PySimpleGUI桌面应用程序中使用Google字体？
- 3
在Google Web Toolkit中使用自定义字体
- 4
如何在Qt应用程序中使用Windows字体
- 5
Google字体和web2py
- 6
如何在Sass中使用@use Google字体URL？
- 7
如何在Google Apps脚本中使用Awesome字体？
- 8
如何在具有file：/// URI的JavaScript Web应用程序中使用Google Analytics（分析）
- 9
如何在我的Web应用程序中使用AccountManager中的Google令牌？（使用omniauth-google-oauth2滚动）
- 10
如何在Google API中使用Web应用程序生成的令牌填充本机应用程序凭据？
- 11
在自定义SharePoint MasterPage HTML中使用Web字体
- 12
TTF格式是否足以在项目中使用Web字体？
- 13
Google Web字体如何确定要提供给浏览器的字体版本？
- 14
Google Web字体如何确定要提供给浏览器的字体版本？
- 15
如何在SASS和LESS中定义Web字体
- 16
如何在Django项目中使用下载的字体而不是Google字体API
- 17
如何在BeautifulSoup中使用元素的样式定义（例如填充，字体大小等）对元素进行Web刮擦
- 18
如何在WatchKit中使用等宽字体
- 19
如何在neovim中使用Operator字体？
- 20
有没有办法在HTML电子邮件中使用Google Web字体？
- 21
更改移动Web应用程序的字体大小选项？
- 22
如何在Windows Universal应用程序中使用自定义字体？
- 23
如何在Chrome打包应用中使用自定义/外部字体图标
- 24
如何在Mac应用程序中使用自定义字体？
- 25
如何在RShiny应用程序中使用自定义字体
- 26
如何在Windows Universal应用程序中使用自定义字体？
- 27
如何在Swift中使用动态大小更改iOS应用程序的字体？
- 28
如何在Google Web Designer中使用广告暴民？
- 29
如何在Visual Studio Web表单中使用Google Maps？
我来说两句