就是记录一下使用Hugo 遇到的一些 问题，以及处理的过程。
Hugo 简单介绍下就是由Go 语言写的一个博客框架. 以下是它的网站简介
Hugo is one of the most popular open-source static site generators. With its amazing speed and flexibility, Hugo makes building websites fun again.
1. 使用主题修改字体。
开始用的Hugo 使用pure 主题控件， 看着还不错，正好 Jetbrains 出了一款Mano字体
首先 下载 字体文件 https://www.jetbrains.com/lp/mono/ 点开 博客 的加载字体是通过网络请求 现在这样 base64编码过的：
data:application/x-font-woff;charset=utf-8;base64,d09GRgABAAAAAD7sAAsAAAAAWwQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAAABHU1VCAAABCAAAADMAAAB
+Z6tpZrWVMc0J2aVxZaLR6AG9AyuUAA==
第一次见很好奇就去搜了下，发现这种处理 web 字体的好处 出处:
不同浏览器以不同方式处理 Web 字体：
- Chrome 和 Firefox 如果字体在3s内加载成功，文字会从隐藏显示为自定义字体。如果字体在3s后还>是获取不到，文字就会从隐藏显示为默认字体 [FOIT]
- IE 会立即显示系统备用字体，然后在自定义字体到达时将进行替换。现在部分版本的 Chrome 也使用>了这种方案 [FOUT]
- Safari 会等待自定义字体加载成功才显示文字。如果字体一直获取失败，文字就永远也不会出现 [FOIT]
为了解决这些问题，使用 Base64 将字体内联到样式表中：如果 CSS 和字体同时到达，就不会 FOIT 或 FOUT，因为 CSSOM 和字体解析几乎同时发生。
接下来就是 看怎么处理字体文件的引用了， 找了下pure 的字体文件夹 看readme 有点懵逼 pure/static/fonts/README.md:
If you are providing web font files, this is the place to put them. The fonts >task will copy them over to the destination specified in config.json, and file >names will be reved in production builds (if enabled).
If you don’t plan using web fonts, or are relying on an external service like >Google Fonts, feel free to delete this folder and the tasks.fonts config in >gulpfile.js/config.json.
Tasks and Files gulpfile.js/tasks/fonts
很简陋 只说了个gulp gulp 就是个前端的自动化构建静态资源的一个工具（想起来了以前Laravel 一开始就是用的gulp 后来就用的 webpack 也是坑。） 用 gulp + base64 + font 就google到了一个 插件gulp-inline-fonts 然后顺便又学习了下 gulp 这个是怎么基于流构建的:
//gulpfile.js
var gulp = require('gulp'),
concat = require('gulp-concat'),
inlineFonts = require('gulp-inline-fonts');
gulp.task('idea', function() {
return gulp.src(['static/fonts/JetBrainsMono-Regular.*'])
.pipe(inlineFonts({ name: 'idea' }))
.pipe(gulp.dest('assets/css'));
});
gulp.task('style', function() {
return gulp.src('assets/css/*.css')
.pipe(concat('style.css'))
.pipe(gulp.dest('assets/css'));
});
简单介绍下 gulp 就是通过一个gulpfile.js 的文件 里的 代码执行 . 将指定的组件require 进去 然后基于流 pipe的方式执行。 还是挺方便的。
合并到style.css 之后。 在body里加个idea 就大功告成了。 (图方便就直接加的important)
body {
margin: 0;
font-family: idea !important;
}