谷歌字体 + webpack [英] google fonts + webpack
问题描述
我是 webpack 2.2 的新手；我想知道在我的项目中集成 Google 字体的最佳方式.
I am new to webpack 2.2 ; I would like to know the best way to integrate a Google font within my project.
我正在使用 Webpack HTML 插件从模板生成 index.html.所以目前我直接在 <script> 标签中硬编码了 Google 字体 CSS，但我真的不喜欢这个解决方案"，因为它根本不使用 webpack:
I am using the Webpack HTML plugin to generate an index.html from a template. So for the moment I hard-coded the Google font CSS directly in a <script> tag but I do not really like this 'solution' since it does not really use webpack at all:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<link href="https://fonts.googleapis.com/css?family=Love+Ya+Like+A+Sister" rel="stylesheet">
<body>
<div id='app'/>
</body>
</html>
推荐答案
没有必要使用 SASS.您将需要使用 css-loader(如果您使用 CSS)或 sass-loader(如果您使用 SASS).请注意，如果您使用 SASS，您将需要两个加载器.
There is no need to use SASS. You will either need to use css-loader (if you are using CSS) or sass-loader (if you are using SASS). Note, if you are using SASS you will need both loaders.
两个加载器都会打包 url() 语句.但是，它们都只有在 URL 是相对 URL 时才有效(这可能是当前答案似乎不起作用的原因).
Both loaders will pack url() statements. However, they both will only work if the URL is a relative URL (which is probably why the current answer doesn't seem to be working).
这意味着您需要下载字体.更复杂的是，每种字体都有多种格式，如果您想支持所有浏览器，则需要所有格式.幸运的是，有一个出色的网站可以帮助我们:google-webfonts-helper.
This means you will need to download the fonts. To make matters more complicated, each font is available in several formats and all formats are required if you want to support all browsers. Luckily, there is an excellent website to help us: google-webfonts-helper.
在该网站中输入您想要的字体，它会为您生成如下所示的 CSS 规则:
Enter the fonts you desire into that website and it will generate CSS rules for you that look like the following:
/* roboto-regular - latin */
@font-face {
font-family: 'Roboto';
font-style: normal;
font-weight: 400;
src: url('../fonts/roboto-v18-latin-regular.eot'); /* IE9 Compat Modes */
src: local('Roboto'), local('Roboto-Regular'),
url('../fonts/roboto-v18-latin-regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/roboto-v18-latin-regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/roboto-v18-latin-regular.woff') format('woff'), /* Modern Browsers */
url('../fonts/roboto-v18-latin-regular.ttf') format('truetype'), /* Safari, Android, iOS */
url('../fonts/roboto-v18-latin-regular.svg#Roboto') format('svg'); /* Legacy iOS */
}
此 CSS 规则是通过 url() 导入的，并且 URL 是相对的.这意味着 css-loader 会将其打包到您的应用程序中.但是，您还必须下载这些 URL 引用的所有文件.幸运的是，上面提到的 google-webfonts-helper 网站为此提供了一个下载链接.下载这些字体并将它们放在 ../fonts(或任何你想要的目录.我个人使用 ./assets/fonts.google-webfonts-helper 工具有一个输入，如果您有自定义目录，您可以使用)
This CSS rule is importing via url() and the URLs are relative. This means that the css-loader will pack it into your application. However, you have to also download all of the files referenced by those URLs. Fortunately, the google-webfonts-helper website mentioned above offers you a download link for that purpose. Download those fonts and place them in ../fonts (or whatever directory you want. I personally use ./assets/fonts. The google-webfonts-helper tool has an input you can use if you have a custom directory)
奖励:材质图标字体
Google 的材料图标通常作为字体显示在网站上.但是，它们需要特殊的 CSS 才能使其工作.如果要打包材质图标字体，则需要以下字体:
Google's material icons are typically exposed to a website as a font. However, they require special CSS to make them work. If you want to pack the material icons font then you need the following font face:
@font-face {
font-family: 'Material Icons';
font-style: normal;
font-weight: 400;
src: url('../fonts/MaterialIcons-Regular.eot'); /* For IE6-8 */
src: local('Material Icons'),
local('MaterialIcons-Regular'),
url('../fonts/MaterialIcons-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/MaterialIcons-Regular.woff2') format('woff2'),
url('../fonts/MaterialIcons-Regular.woff') format('woff'),
url('../fonts/MaterialIcons-Regular.ttf') format('truetype'),
url('../fonts/MaterialIcons-Regular.svg#Inconsolata') format('svg'); /* Legacy iOS */
}
您可以从 这里(在解压后的 iconfont 目录中查看.
You can download the font files from here (Look in the iconfont directory of the extracted zip.
此外您还需要在字体规则后添加以下 CSS:
In addition you will also need to add the following CSS after the font face rule:
.material-icons {
font-family: 'Material Icons';
font-weight: normal;
font-style: normal;
font-size: 24px; /* Preferred icon size */
display: inline-block;
line-height: 1;
text-transform: none;
letter-spacing: normal;
word-wrap: normal;
white-space: nowrap;
direction: ltr;
/* Support for all WebKit browsers. */
-webkit-font-smoothing: antialiased;
/* Support for Safari and Chrome. */
text-rendering: optimizeLegibility;
/* Support for Firefox. */
-moz-osx-font-smoothing: grayscale;
/* Support for IE. */
font-feature-settings: 'liga';
}
注意:使用材料图标字体的说明来自这里 以防这些说明过时.
Note: Instructions for using the material icons fonts come from here in case these instructions get out of date.
这篇关于谷歌字体 + webpack的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
