web-font 个人小学习总结

浏览数：35 / 时间：2015年06月09日

个人觉得 webFont 分为两种：

第一种就是真正文本字体，客户端没有安装的字体通过远程加载字体来实现特殊字体提高用户体验；

icodon.com : http://icodon.com/google-web-font.html（从 google 加载字体）

iconfont ： http://www.iconfont.cn/webfont/#!/webfont/index （从 iconfont 加载字体）

从 google 加载字体代码：

<!doctype html>
<html>
<head>
<meta charset="utf-8">

<title>googleFont</title>
<link href=‘http://fonts.googleapis.com/css?family=Wire+One‘ rel=‘stylesheet‘ type=‘text/css‘>
<style>
body,html{font-family: ‘Wire One‘, sans-serif; font-size: 50px;}
</style>
</head>

<body>
tianqibucuo/天气不错
</body>
<script type="text/javascript">WebFontConfig = {google: { families: [ ‘Wire+One::latin‘ ] }};(function() {var wf = document.createElement(‘script‘);wf.src = (‘https:‘ == document.location.protocol ? ‘https‘ : ‘http‘) +‘://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js‘;wf.type = ‘text/javascript‘;wf.async = ‘true‘;var s = document.getElementsByTagName(‘script‘)[0];s.parentNode.insertBefore(wf, s);})(); </script>‘;
</html>

效果：

技术分享

缺点：外国网址加载慢（可以用360CDN http://libs.useso.com/），还有就是外国字体对中文几乎没有什么用；

从 iconfont 远程加载代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>googleFont</title>
<style>
@font-face {font-family: ‘webfont‘;
  src: url(‘//at.alicdn.com/t/frmlgzfyv4an61or.eot‘); /* IE9*/
  src: url(‘//at.alicdn.com/t/frmlgzfyv4an61or.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘//at.alicdn.com/t/frmlgzfyv4an61or.woff‘) format(‘woff‘), /* chrome、firefox */
  url(‘//at.alicdn.com/t/frmlgzfyv4an61or.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url(‘//at.alicdn.com/t/frmlgzfyv4an61or.svg#NotoSansHans-Black‘) format(‘svg‘); /* iOS 4.1- */
}

.webfont{font-family: ‘webfont‘!important; font-size: 50px;}

</style>

</head>

<body>
    <div class="webfont">tianqibucuo/天气不错</div>
</body>
</html>

其功能一样，不过到目前为止我还没在项目里用过；

第二种就是用svg做字体的ico图标

慕课网的视频教学 : http://www.imooc.com/view/243 ;

iconfont ： http://v.youku.com/v_show/id_XNjQwMTEyMDQw.html ;

外国这种上传SVG生成字体的网站除了慕课视频里讲的icomoon：https://icomoon.io/app/#/select 还有fontello： http://fontello.com/ 当然还有一些其他的网站。这两个网站的使用基本类似；

慕课视频里讲了很详细包括一些兼容问题等,icomoon里也都处理了:

ie的兼容：
src:url(‘fonts/icomoon.eot?k1b9gw‘);
src:url(‘fonts/icomoon.eot?#iefixk1b9gw‘) format(‘embedded-opentype‘)

切记写在标签里的 字体编码需要加&

他生成的.class:before名其实是网站设置class前缀或默认的‘ico-’+上传svg的名组成的

技术分享

@font-face {
    font-family: ‘icomoon‘;
    src:url(‘fonts/icomoon.eot?k1b9gw‘);
    src:url(‘fonts/icomoon.eot?#iefixk1b9gw‘) format(‘embedded-opentype‘),
        url(‘fonts/icomoon.woff?k1b9gw‘) format(‘woff‘),
        url(‘fonts/icomoon.ttf?k1b9gw‘) format(‘truetype‘),
        url(‘fonts/icomoon.svg?k1b9gw#icomoon‘) format(‘svg‘);
    font-weight: normal;
    font-style: normal;
}

.icon {
    font-family: ‘icomoon‘;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;

    /* Better Font Rendering =========== */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

.icon-phone:before {
    content: "\e600";
}

.icon-star:before {
    content: "\e601";
}

如果你想自己写这个class名你就得自己从他压缩包里生成demo.html 里找对应的 content 里的16位编码；

技术分享

还有就是从字体编译的AsiaFont Studio 4 、 FontCreator 软件打开生成的字体icomoon.ttf 找想要用的编码

技术分享

我个人更喜欢用软件，方便下一次修改，删除之后作对比，目前某项目里用的 icomoon 上生成的字体；

iconfont 视频里操作的很详细：

上 iconfont 生成的代码:

@font-face {font-family: "iconfont";
  src: url(‘iconfont.eot‘); /* IE9*/
  src: url(‘iconfont.eot?#iefix‘) format(‘embedded-opentype‘), /* IE6-IE8 */
  url(‘iconfont.woff‘) format(‘woff‘), /* chrome、firefox */
  url(‘iconfont.ttf‘) format(‘truetype‘), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
  url(‘iconfont.svg#iconfont‘) format(‘svg‘); /* iOS 4.1- */
}

.iconfont {
  font-family:"iconfont" !important;
  font-size:16px;
  font-style:normal;
  -webkit-font-smoothing: antialiased;
  -webkit-text-stroke-width: 0.2px;
  -moz-osx-font-smoothing: grayscale;
}
.icon-phone:before { content: "\e600"; }
.icon-star:before { content: "\e601"; }

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

web-font 个人小学习总结