小编sma*_*ajl的帖子

将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万
查看次数

使用ESC键清除Angular/AngularUI中的输入文本字段

在我的Angular应用程序的几个地方,我需要使用ESC键清除用户的输入.问题是,我不知道如何使用文本输入字段(textarea正在清除).看到这个小提琴:

jsFiddle示范问题

捆绑:

<input ng-model="search.query" ui-keypress="{esc: 'keyCallback($event)'}" />
Run Code Online (Sandbox Code Playgroud)

我使用的回调:

$scope.keyCallback = function($event) {
  $event.preventDefault();
  $scope.search.query = '';
}
Run Code Online (Sandbox Code Playgroud)

任何人都可以,弄清楚我需要做什么来用ESC键清除文本输入

解决方案: 正如bmleite所建议的那样,你不应该听' keypress '而是'keydown''keyup'.问题是,'keydown'在Firefox中不起作用,所以只有'keyup'才能听取ESC的魔术.;)

工作小提琴:http://jsfiddle.net/aGpNf/190/

解决方案更新: 最后我不得不听'keydown'和'keyup'事件.因为在我的情况下FF确实将ESC keydown上的输入字段重置为之前的状态,所以它搞砸了我的模型.所以'keyup'清除模型和'keydown'检查模型是否为空并执行适当的操作.我还需要手动散焦输入,以防止文本弹出.:/

input clear angularjs angular-ui

24
推荐指数
3
解决办法
3万
查看次数

标签 统计

angular-ui ×1

angularjs ×1

base64 ×1

clear ×1

css ×1

fonts ×1

google-webfonts ×1

input ×1

webfonts ×1