相关疑难解决方法(0)

将Web字体转换并渲染为base64 - 保持原始外观

我想在我的网站上推迟字体加载,灵感来自Smashing Magazine的延迟字体加载逻辑.

主要是将字体转换为base64并准备CSS文件.我到目前为止的步骤:

  1. Google Web Fonts上选择字体并下载它们.
  2. 使用Font Squirrel Webfont Generator将下载的TTF文件转换为带有base64嵌入式WOFF字体的CSS文件(专家选项 - > CSS - > Base64编码).
  3. 加载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: GWF与base64渲染比较

尤其是注意口音和绝对可怕的信件a.其他字体系列和变体看起来也非常明显不同(尺寸和形状扭曲等).


所以问题是:如何将来自Google Web Fonts(或其他来源)的TTF文件正确编码为base64格式,并以与原始文件相同的方式使用它?

css fonts base64 webfonts google-webfonts

40
推荐指数
2
解决办法
5万
查看次数

Angular 6构建一个带有资产的库

在构建和打包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 lib1ng build lib1 --prodassets/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

angular-cli ng-packagr angular6

18
推荐指数
2
解决办法
1万
查看次数