如何将Google字体添加到VueJS组件? [英] How do I add a Google Font to a VueJS Component?

问题描述

我已经尝试了一个小时，试图找到一种将Google字体导入VueJS组件的方法，但是我似乎找不到解决方案，什么也没有用，甚至是以前StackOverflow问题中的内容也没有.我找到的所有答案现在都是1.5到2岁.如果有人可以提出最新的解决方案，我将不胜感激.

I've been trying for an hour to find a way to import a Google Font into a VueJS Component, but I cannot seem to find a solution, nothing worked yet, not even the stuff from previous StackOverflow questions. All the answers I've found are 1.5 to 2 years old now. I would appreciate it greatly if someone could suggest an up to date solution.

我正在使用VueJS2 + Webpack + Vue-cli

I am using VueJS2 + Webpack + Vue-cli

推荐答案

最快的方法是将字体导入CSS文件中，例如App.css(如果所有组件都应具有的话):

The fastest way is to import the font in a CSS file, for example App.css, if all components should have it:

@import url('https://fonts.googleapis.com/css?family=Roboto+Condensed');

html, body {
  font-family: 'Roboto', sans-serif;
}

#app {
  font-family: 'Roboto', sans-serif;
}

导入语句也由Google字体显示.

The import statement is also shown by Google Fonts.

选择字体，单击Embed，然后在选择窗口中单击@import:

Select your fonts, click on Embed and then @import at the selection window:

这篇关于如何将Google字体添加到VueJS组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！