我想在我的网站上推迟字体加载,灵感来自Smashing Magazine的延迟字体加载逻辑.
主要是将字体转换为base64并准备CSS文件.我到目前为止的步骤:
Open Sans Bold的CSS片段:
@font-face {
font-family: 'Open Sans';
src: url(data:application/x-font-woff;charset=utf-8;base64,<base64_encoded>) format('woff');
font-weight: 700;
font-style: normal;
}
Run Code Online (Sandbox Code Playgroud)
该问题是,该转换后的字体看起来非常不同.看看Open Sans Bold:

尤其是注意口音和绝对可怕的信件a.其他字体系列和变体看起来也非常明显不同(尺寸和形状扭曲等).
所以问题是:如何将来自Google Web Fonts(或其他来源)的TTF文件正确编码为base64格式,并以与原始文件相同的方式使用它?
在构建和打包Angular 6库时,我似乎无法指示Angular CLI将库的资源复制到dist/assets每个构建的文件夹中.
假设项目的文件夹结构是这样的 -
- dist
- e2e
- node_modules
- projects
- lib1
- src
- lib
- assets
- icons
- src
Run Code Online (Sandbox Code Playgroud)
当我运行ng build lib1或ng build lib1 --prod在assets/icons文件夹不被复制到dist/lib1/assets/icons.
如果我跑ng build那么src/assets(根SRC /资产)被复制,但没有projects/lib1/assets.
该angular.json文件包含"assets": ["src/assets"]对它的引用,但它不允许将assets密钥专门添加到项目中,只允许添加到主根应用程序.添加时,我收到以下错误:
架构验证失败,出现以下错误:数据路径""不应具有其他属性(资产).
我还尝试将以下自定义复制规则添加到资源,以将资产复制到dist/lib而不是dist/appname:
"assets": [
"src/favicon.ico",
"src/assets",
{ "glob": "**/*", "input": "src/assets/icons", "output": "../lib1/assets/icons" }
],
Run Code Online (Sandbox Code Playgroud)
但是我收到以下错误:
无法将资产写入输出路径之外的位置.
是否有在每个构建中管理库资产副本的内置方法?
更新06/05/2018
我向Angular CLI提出了一个问题,但尚未收到回复.问题#11701