个人觉得 web-font  分为两种：

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

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的名 组成的

单个SVG的路径一定要闭合否则 icomoon 网站在最后生成字体的时候 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 个人学习小总结的更多相关文章

  1. CSS3与页面布局学习总结（五）——Web Font与Sprite

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  2. CSS3与页面布局学习笔记（五）——Web Font与CSS Sprites（又称CSS精灵、雪碧图）技术

    一.web font web font是应用在web中的一种字体技术,在CSS中使用font-face定义新的字体.先了解操作系统中的字体: a).安装好操作系统后,会默认安装一些字体,这些字体文件描 ...

  3. <web Font的使用>

    使用font-face将字体引入web中 先将字体文件复制到项目的font文件夹中,CSS样式如下: @font-face { font-family: 'iconfont'; /*字体名称*/ sr ...

  4. Bootstrap & Font Awesome 学习笔记

    学习网站:http://bootstrap.ninghao.net/index.html https://www.freecodecamp.cn http://www.runoob.com/boots ...

  5. web前端开发学习内容

    应该 具备的 知识技能 :懂web标准,熟练手写 xhtml css3 并符合 符合w3c标准                       代码能 兼容主流浏览器.ie6.7.8.9 ff 等.    ...

  6. WEB前端开发学习：源码canvas 雪

    WEB前端开发学习:源码canvas 雪 双旦节要到了,程序员们为了响应气氛,特别用代码制作了动态雪花,WEB前端开发学习的初学者们一起跟着案例做一遍吧! <!DOCTYPE html> ...

  7. Web前端的学习介绍(截止今天还有Bootstrap没有学，要腾点时间解决掉)

    Web前端的学习分为以下几个阶段,具体的学习路线图如图所示. 第一阶段——HTML的学习 超文本标记语言(HyperText Mark-up Language 简称HTML)是一个网页的骨架,无论是静 ...

  8. web前端的学习误区

    web前端的学习误区  网页制作是计算机专业同学在大学期间都会接触到的一门课程,而学习网页制作所用的第一个集成开发环境(IDE)想必大多是Dreamweaver,这种所见即所得的“吊炸天”IDE为我们 ...

  9. 史上最全的web前端系统学习教程！

    这份资料整理花了近7天,如果感觉有用,可以分享给更有需要的人. 在看接下的介绍前,我先说一下整理这份资料的初衷: 我的初衷是想帮助在这个行业发展的朋友和童鞋们,在论坛博客等地方少花些时间找资料,把有限 ...

  10. Web前端培训学习心得

    web前端工程师技术日趋成熟,越来越多的行业巨头正不断向web前端工程师示好,在未来几年,web前端将会以更多的形式渗透到我们生活中的方方面面,因此越来越多的从业者开始关注web前端开发行业,今天小编 ...

随机推荐

  1. windows sqlplus客户端连接oralce数据库中文显示问题

    运行环境 服务器:centos6.8 服务器oracle版本:oracle 11g R2 64位,字符集是ZHS32utf8. 客户端:navicat 12x64  windows8.1x64 问题分 ...

  2. 如何计算UDP/TCP检验和checksum

    如何计算UDP/TCP检验和checksum 一.下面的图是一个UDP的检验和所需要用到的所有信息,包括三个部分:1.UDP伪首部2.UDP首部3.UDP的数据部分(切记不要遗漏该部分,否则就~吐血了 ...

  3. HDU 6374(拼三角形 **)

    题意是在给定的线段长中挑选出能拼成三角形的最长的三条边,输出三角形的周长.先对所有边排序,从大到小,满足两较短边之和大于第三边就输出,若从未输出过就输出 -1 #include <iostrea ...

  4. Part-Three 类与对象

    1.时钟类的完整程序 #include<iostream> using namespace std; class Clock{ public : ,,);//设置函数的默认值,注意!在此处 ...

  5. react使用proxy代理配置

    proxy,默认为NULL,类型为URL,一个为了发送http请求的代理 在package.json文件中使用proxy配置可以解决跨域问题 使用注意事项: create-react-app脚手架低于 ...

  6. daemon_init函数：调用该函数把普通进程转变为守护进程

    #include <unistd.h> #include <syslog.h> #include <fcntl.h> #include <signal.h&g ...

  7. 从零开始搭建轻量级个人XSS平台

    一. 前言 决定搭建XSS平台是因为自己想深入学习一下XSS相关的知识,多多进行实践,上网搜索了一下XSS平台有很多,但是总觉得不是很安全,这个毕竟敏感信息要传输到陌生人的服务器上,而且服务器端测试代 ...

  8. Docker 获取镜像 - 一

    docker  images docker 镜像获取方式: 1.pull 可以直接从网上拉取: 2.import  可以从现有容器打包成一个镜像: 3.commit 可以从现有容器一个镜像: 4.bu ...

  9. Coursera, Deep Learning 2, Improving Deep Neural Networks: Hyperparameter tuning, Regularization and Optimization - week1, Course

    Train/Dev/Test set Bias/Variance Regularization  有下面一些regularization的方法. L2 regularation drop out da ...

  10. bootstrap table 冻结列 ie 兼容

    修改前: Chrome效果 Ie11效果 修改后: Ie11效果 修改bootstrap-table-fixed-columns.js文件 修改其中的initBody方法 修改为