⑴ 将图标转换成web字体 我显示不出来的
字体文件创建好了，你可以先用word试试么...
⑵ CSS的问题 我知道括号里面是设置属性 颜色啊 什么的 这些 前面那些表示什么啊 WEB-M2 M2H3的 这些是什么啊
每个层的class 命名
例如<div class="web_m"></div>
css里设置这个样式就是.web_m{ background:#c0c0c0; height:460px;} 这种方式
.web_m2 h2这种是指
<div class="web_m"><h2>这里的样式</h2></div>
.web_m2 .web_m2_t这个定义了2个层里的 color属性 因为2个color是一样的 可以综合一个定义
⑶ font2web在线字体转换攻略
class Composite : Component
{
private List children = new List();
public Composite(string name) : base(name) { }
public override void Add(Component c)
{
children.Add(c);
}
public override void Remove(Component c)
{
children.Remove(c);
}
⑷ 如何制作icon-fontweb字体ttf
1.你需要一个矢量图（AI做的最好）
2.你需要打开icomoon的网站~在线制作时使用~这里贴不上网址~请自行网络哟~
方法/步骤
这里，以已经有了一个位图为例~灰色的，一个丑不拉几惊世骇俗的……额……丑图标。我们把它在AI里抠图来~填上一个红色~然后把红色的抠出来的新矢量图给复制下来。
新建一个画布，（好吧，画布啊窗口啊文件啊什么的，你爱怎么称呼都好，不要在意这些细节），这里要注意的是，如果你每 个icon的大小不一样，那你至少得保证你的SVG画布一样大才行，新建的画布就和你切图时用的统一尺寸一样，一个标准就好，把你所有的icon都放进这 个尺寸里，调节大小，它们变成字体就不会错。这里楼主需要46*46的，所以建了46*46的。
3
在新的画布里，粘贴出你刚才复制的新抠的矢量图~由于楼主的画布大小没有大变化，所以和之前步骤一中的图差不多，仔细看，可以看到，没有原来的底图了，只有我们同样丑不拉几的新抠的图标。
⑸ 如何把中文字体转成 web font
1、目前还没有专门的工具能生成所有web所需格式。
2、PS里的路径虽然是矢量的，但PS本身是点阵图工具，导成高分辨率的jpg是最好的方式，如果你不想在转换成失去精度，可以用FontCreator里面的工具来调整矢量轮廓(在空白处双击就能到锚点模式，锚点工具很方便的)。
或者用AI或coreldraw将矢量图设计好，然后导入另一个字体工具“fontographer”中，这个工具可以将矢量锚点原版的保留下来。然后再生成
作
⑹ 如何制作自己的网页字体图标
从设计单独的图标开始，到把它们转化成@font-face格式以备嵌入，乃至授权给他人使用，整个过程中我们将仅使用免费软件和在线服务。感觉怎么样呢？你不必依托于任何深奥的知识就可以制作出一套成功的英文字体（包括字母和数字），而只需要眼睛来设计——你面对的可能是非常非常小的东西。
最终，你将会收获一个制作设计元素的过程（方法），它的意义远远在制作出简单的图标之上。
在我们继续之前，首先应该谈谈，究竟希望通过在设计中使用图标达到什么目的，又是什么使得一个图标比下一个更成功。先讲理论再讲应用。为了完成这个任务，我们必须思考图标作为符号学的一部分，所扮演的角色。
什么是优秀的图标？
符号学，从广义上来说就是研究符号系统，我们如何对它们的形成和维护做出贡献，它们亦因我们对世界的理解而受到影响。
不论何时，当你从“它象征着什么”—— 它向你的观众传达了什么信息，或者它唤起了他们什么概念——思考你的某一部分设计工作时，你就是以符号学家的角度来审视你的设计。符号学像其它语言学一样，的确可以覆盖一种语言，在一个网站上面，有很多东西不是通过文字表达出来的，例如颜色、字体、形状（图标）。每个人都应该注意的是，这些东西所表达的都含有一种很强的文化因素。在中国，红色可以表示好运气，而在很多西方国家，它却意味着危险。
术语“icon”在符号学中有一个特殊的意思。icon是一个神器，通过相似表达某事物。例如，一个标记地图位置的icon。它拥有一个类似真实的
地图标记的形状,因此它可以表示一个位置，反过来，真正的地图位置标记使人们想起各种有意义的概念。其中这些有抽象的概念，比如地点；也有不太抽象的概
念，比如这个位置可能在什么地方。
一些所谓的图标并不具有真正意义的代表性。无处不在的RSS图标，一个点和两个同心圆弧段，没有什么比它更像Really Simple
Syndication 了。构成RSS图标的形状通过单独约定具有象征意义，对此我们已经达成了共识。不过，一个RSS图标更适合被称为RSS标志。
现在，我希望我们已经确定了下面两项成功的网站icon需要遵循的准则：
要有与真实事物的相似点，例如，一个类似真实打印机的打印图标。
你的图标在符号系统中应该是一个熟悉的，可识别的标志。
字体图标日益受到欢迎
Icon字体，由于其提供了一种图标速记方式，长期以来被认为是一种加强型UI设计，它协助人们理解文本信息。Icon图像以毒品传播的速度在整个web设计社区流传，使用它可以使你的设计更加亮丽、吸引更多用户点击。
与图片相比，使用icon式字体是一个相对新的主意。然而，与图片（背景图片方式）相比，它具备很多固有的优势，因此它的吸引力正在逐渐增长。早在9月初，我在微博上写了它的一些好处，Chris Coyier显然也有类似的想法，几周之后也向更多观众介绍了它。基于以上两篇文章和其它内容，我编写了这个较为完整的特征列表：
它们的尺寸能够轻松调整，并且不会损坏图像质量（作为矢量图）；
给icon定义颜色和文本一样简单。例如，对于一个rss图标，color:orange；
可以把许多icons排列在一个组中，也就是一个文件中，这样只需要一次http请求就可以了;
正如Chris所指出的，它们在IE6中也可以借着透明性显示出形状（这一点 与PNG图片不同）;
对于那些应该出现在文字附近的图标，对齐方式和包装都不是问题（因为它们是文本）;
你可以应用CSS3的text-shadow和background-clip:text效果，以便凸显字型的形状;
不像SVG，icon字体很容易实现跨浏览器兼容；
问题
Chris说过，使用icon字体是一个不错的主意，我要告诉你。
尽管如此，icon字体的使用现状并不理想。首先，一些优质的可用字体，如Pictos, Fico, Klepto, Cheetos, Ponyo 和 Sailor Moon都是收费的。实际上意味着真有两个问题：
你或许不得不投资一部分钱。
无论你是否需要花钱，你将会被迫接受其他一些人的糟糕设计。
除了自动抓取程序，我假定主要是网页设计师将会阅读这篇文章。我是一个设计师，我不认为只有我一个讨厌依靠别人的作品，使自己的设计思路大打折扣这
种事儿。当然，我更不喜欢那种有支付权限的想法。我知道自己要使用什么图标，并且我知道如何才能使其适合我的整体设计。我想要那种控制力。
经过一些搜索，我想介绍一下Inkscape的svg字体编辑器。通过使用Inkscape和一款在线转换器（SVG字体到TTF），我制作出了字体“Heyding”，这个字体在 Simurai’s list（由Coyier的文章链接到）中有介绍。我不打算将自己的字体卖给你（它是免费的），但是我想它会带给你一个非常好的概念。
使用Inkscape制作icon字型
启动Inkscape
我们先从下载和安装Inkscape开始。你也应该使用我的icon字体启动器模板，它们被放在这个GitHub仓库的资源文件夹里（以后这个项目中还会有更多）。一旦你在Inkscape中打开了这个文件，你应该通过在主菜单中打开以下窗口来设置好你的工作空间：
OBJECT → FILL AND STROKE
OBJECT → ALIGN AND DISTRIBUTE
TEXT → SVG FONT EDITOR
在SVG字体编辑面板中，点击“Font”下的“Font1”。现在，你的工作空间看起来应该有点儿像这个截图：
值得指出的是， baseline不是在画布的下边界之下：如果你希望与相邻的字体共享同一条基线，你的图标应该很轻微地悬在画布的底部。我已经用Georgia，Arial和一些网页字体进行了测试。
制作你的第一个字型
为定义字型，点击SVG字体编辑面板中的“Glyphs”选项卡，然后点击面板下方的“Add
Glyh”按钮。一开始你可能不太清楚，但如果你在你的字形（“字型1”）上点击，一个字段将会显示出来，它要求你输入你需要的图标对应的字符。我们首先
要做一个简单的星形，所以我建议你输入的字符“s”，“S”或“*”：
现在我们已经定义了字型对应的字符，我们需要制作字型本身。由于这次我们仅仅要制作一个星星，我们应该从Inkscape左边的工具栏中选择有用的
Stars and Polygons tool
，然后，在画布上绘制一个星星。你会发现，这个工具自带的选项允许您更改星星的外观。在我的例子中，选择了角数为5，spoke
ratio为0.5，rounded value为0.1。
使用Align and Distribute panel（可能在SVG Font Editor下面隐藏着）使星星横向居中，然后乡下拖动形状使触及基线。关闭网格显示之后，画布看起来应该像这样子：
在我们的icon字体中，字型只是形状，没有颜色、层级或者渐变的形状。因此，为了使我们的星星成为一个合格的字体候选者，我们必须将它由一个对象
转化成基于路径的图形。你可以通过在主按钮上选择星星，然后是PATH → OBJECT TO
PATH来完成这一任务。现在，选择了星星之后，我们可以在SVG Font Editor 中，高亮显示可用的“s”字型，然后点击 Get
curves from selection按钮：
当你在Sample Text 区域输入“s”时，你的星星应该被预览出来，如下所示：
制作更加复杂的icon
你已经制作出了第一个可扩展的SVG字体字型。通过使用Fill and
Stroke面板上的选项：编辑路径节点，以及合并对象和笔画，能够使你做出更加不凡的icon设计。由于我们还有很多要讲，我不想深入完成一个完整的
Inkscape教程，但是遵循下面的简单规则会给你带来好处：
坚持使用黑色笔画和填充，只是为了提醒你：那些icon仅仅是形状，而非复杂的矢量图。为icon上色这件工作，我们会在最终产品中使用CSS来完成。
所有对象和笔画（线条）必须被转化成路径（不管使用PATH → OBJECT TO PATH 或者 PATH → STROKE TO PATH）
当有多个对象和/或笔画被用来完成一个icon字型时，它们应该被合并起来（使用PATH → COMBINE 或者，在某些情况下，使用 PATH → UNION）
为了在已有的形状上剪切出想要的形状，将形状放置在主形状上面，选择两个形状，然后选择 PATH → DIFFERENCE。点击Get curves from selection ，黑色块上面的白色区域剔除之后就是你要的形状。
准备嵌入你的字体
假如你已经重复了很多次我刚才所描述的方法，创建了一些有用的图标，并且，字体文件被保存为myicons.svg。现在，你将要准备好把这个图标库用于网页中。
把SVG转化成TTF
你应该采取的第一项措施是，将SVG字体格式转换成一个更熟悉、更通用的格式。 TTF是一种用于本地安装的卓越格式。同时，它还为再转化成@font-face提供了一个良好的基础。可以进行字体转换的在线服务包括： http://onlinefontconverter.com，http://www.fontconverter.org和http://www.font2web.com。然而，我个人最喜欢的，是http://www.freefontconverter.com，因为我不会排队，也从来没看到它产生什么故障。
我想，不需要向你介绍如何使用这个资源也足以显示我的诚意了。醒目的文件上传字段，select元素和巨大的转换按钮会让你迅速抓住重点，真的。
编辑字体信息
既然你已经获得了一个TTF，我推荐你现在编辑产生的元数据。对字体进行重命名、添加属性和描述，使它准备好被安装、嵌入和分发。这也是一种声明字体为你所创造的途径。运行Windows的读者可以选择使用貌似很霸气的 Microsoft Font Properties Editor或者允许免费使用X天的Typograf。对于苹果和Linux用户，我希望得到你们更好的意见。
重要提示：虽然Microsoft Font Properties
Editor允许您添加作者，描述和许可信息，它似乎并没有让你编辑字体名称、附言名称等基本数据。这些字段是被禁用的。如果你想使用这些特殊的功能，你
需要在SVG转换为TTF之前，在SVG代码中编辑禁止的值。在你喜欢的文本编辑器（我用Notepad++）中打开原始的SVG，并编辑以下内容：
Font Name:标签中可以寻找到, font-family 属性
Postscript Name:标签中可以寻找到, id属性
Description:你应该在这个标签中添加一个描述（作者、许可等）。请注意这与TTF描述文字是不同的，转换过程中将不会被保留；你还需要为TTF添加单独的描述信息。
嵌入字体
一旦你在本地系统中安装了TTF，并且已经预览过，确定没有出现意外状况，你就可以在Font Squirrel的 @font-face generator中运行它了。为了使输出代码的效率和效果尽量好，这里有几个专家模式中的选项值得一提：
Subsetting：该选项允许您只运行需要的字符集（包括字符编码、类型、语言等选项），减少文件大小。
Remove kerning:您的图标将几乎总是单独出现，所以字距是没有必要的。据称，这也将减小文件大小。
WebOnly™:如果你希望您的字体仅仅用于web中，而非桌面- 你可以选择此选项。它也可以更好地满足您的授权计划。现在我将介绍许可证。
发布字体
如果你有兴趣发布你的字体，给它添加许可是一个比较好的做法。否则许多字体网站将不会带它玩儿。由于我们制作图标时使用的是免费、开源的软件，发布时也不妨这样做。
目前，有很多可用的授权选项，而逐一调查研究它们有时是令人费解的一件事。 GNU General Public License是完全可以接受的，但你可能要考虑SIL Open Font License。使用这种许可证的主要优点是，reserved font name：即允许其他设计师修改字体，但他们需要用不同的名字。在实践中，这意味着，对图标设计的一些不良行为不能以“你的名字”来进行。
有了这两种许可，你还应该在一个文本文件中保存版本信息，同时在字体的元信息中插入版权声明和完整许可的URL链接。如果需要更具体的说明，请访问各自的许可证页面（上面的链接）。
CSS spriting的终结者
为什么要停下使用SVG字体做通用图标的脚步？有了做图标的能力，也就有了能力去设计出站点独有的形状、品牌元素和装饰。这一点像CSS
sprities，所有这些视觉元素都可以保存在一个文件中，减少了服务器调用http请求的次数；不过，icon字体的元素都可以调整大小，而不必依赖
于位置坐标（背景位置值）才能正确显示。这使它们更适合于 responsive design。
让我们假装要选择使用一个SVG字体去代替一些我的steampunk般的blog里基本的设计元素。组件设计的一个简单的HTML表格呈现会是这个样子：
关于这种方式，最好的事情就是通用性。举例来说，从左边的第二个齿轮形状既可作为一个微小的圆点设计，又可以是一个巨大而抽象的背景装饰。着色很简
单：color:maroon，但没有必要坚持扁平的颜色;多种CSS3效果叠加起来可以为它添加纹理和触感。为了让你一开始有所启发，查看this excellent gallery of CSS3-enhanced webfonts。
关于屏幕阅读器的快速笔记
以这种方式使用字体来显示视觉元素的一个问题是，在屏幕阅读器上输出时会受到影响。直观上的网站访问者会看到齿轮，箭头之类的图标，但是屏幕阅读器将坚持读出指定这些设计的字符。对于使用装饰性的SVG字体元素，我建议听取Coyier的建议：为Unicode的Supplementary Private Use Area分配向量。这样的符号不应该由读者来读出。
一个协作式icon web字体
作为我的JavaScript导师，Rupert，有一天向我指出，使用SVG字体来创建图标集为合作提供了一个有趣的机会。你看，SVG的代码 - XML的一种形式 - 是高度标准化而且轻松可读的。正是源码的顺序让我觉得，icon字体的开发很适合选择像GitHub这样的协作编码服务。
这个想法契合了我想要的符号含义：如果一个图标是由很多人协商之后一致确定的，那么它的形成过程中也存在一定的“共识”。通过我们的图标标识系统设计出来的，一定是最典型的图标。我们应该创建一种属于社区的icon词汇，并且它对于需要的人来说是有意义的。
为了发展这个想法，我创建了一个公开的GitHub仓库Community Icon Font，这个仓库的文件结构并不复杂：仔细阅读上面的Inkscape教程和项目主页的内容应该可以为你解答所有的疑惑。如果你是GitHub的新成员，尝试阅读它们的帮助页面，或者问问你附近的技术人员（我正是这样做的）。
⑺ HTML 如何自带字体 绑定在网页的~我曾经看到过应该可以实现的吧
@font-face是CSS中的一个模块，他主要是把自己定义的Web字体嵌入到你的网页中
语法规则
@font-face {
font-family: <YourWebFontName>;
src: <source> [<format>][,<source> [<format>]]*;
[font-weight: <weight>];
[font-style: <style>];
}
一、TureTpe(.ttf)格式：
.ttf字体是Windows和Mac的最常见的字体，是一种RAW格式，因此他不为网站优化,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome4+,Safari3+,Opera10+,iOS Mobile Safari4.2+】；
二、OpenType(.otf)格式：
.otf
字体被认为是一种原始的字体格式，其内置在TureType的基础上，所以也提供了更多的功能,支持这种字体的浏览器有
【Firefox3.5+,Chrome4.0+,Safari3.1+,Opera10.0+,iOS Mobile Safari4.2+】；
三、Web Open Font Format(.woff)格式：
.woff字体是Web字体中最佳格式，他是一个开放的TrueType/OpenType的压缩版本，同时也支持元数据包的分离,支持这种字体的浏览器有【IE9+,Firefox3.5+,Chrome6+,Safari3.6+,Opera11.1+】；
四、Embedded Open Type(.eot)格式：
.eot字体是IE专用字体，可以从TrueType创建此格式字体,支持这种字体的浏览器有【IE4+】；
五、SVG(.svg)格式：
.svg字体是基于SVG字体渲染的一种格式,支持这种字体的浏览器有【Chrome4+,Safari3.1+,Opera10.0+,iOS Mobile Safari3.2+】。
这就意味着在@font-face中我们至少需要.woff,.eot两种格式字体，甚至还需要.svg等字体达到更多种浏览版本的支持。
为了使@font-face达到更多的浏览器支持，Paul Irish写了一个独特的@font-face语法叫Bulletproof @font-face:
@font-face
{ font-family: 'YourWebFontName'; src: url('YourWebFontName.eot?')
format('eot');/*IE*/ src:url('YourWebFontName.woff') format('woff'),
url('YourWebFontName.ttf') format('truetype');/*non-IE*/ }
但为了让各多的浏览器支持，你也可以写成：
@font-face
{ font-family: 'YourWebFontName'; src: url('YourWebFontName.eot'); /*
IE9 Compat Modes */ src: url('YourWebFontName.eot?#iefix')
format('embedded-opentype'), /* IE6-IE8 */
url('YourWebFontName.woff') format('woff'), /* Modern Browsers */
url('YourWebFontName.ttf') format('truetype'), /* Safari,
Android, iOS */ url('YourWebFontName.svg#YourWebFontName')
format('svg'); /* Legacy iOS */ }
你可以自己用软件做你想要的字体，或者你找到你想要的字体直接用，例如谷歌做的那种字体
⑻ 在国内有没有Google Fonts的web font的替代
想让你的网站瞬间提升质感?试试谷歌和Adobe联合推出的“思源黑体”!现在只要加入一段 Typekit 程序代码，就可以把思源黑体作为网页字体(Webfont)使用了，附上具体的使用教程，来收! 相信大家对“思源黑体(Source Han Sans)”都不陌生，这是 Adobe 和 Google 合作，于 2014 年推出的开放原始码免费字型，提供七种粗细设定，完整支持日文、韩文、繁体及简体中文，有鉴于免费中文字型选择不多，在开发上也颇具难度，一推出便受到许多人关注，修改版字型也陆续出现，例如之前介绍过的思源柔黑体、思源真黑体。 若想将思源黑体做为网页字型(Webfont)使用，你可能会遇到瓶颈，或许是某些问题尚待解决，Google Fonts 迟迟没有把 Source Han Sans 网页字体放上去。最近在翻找资料时发现 Adobe Typekit 已经先行提供“思源黑体”Webfont 了!这也表示网页开发者可以在网站内自由加载这美丽的字型，只要加入一段 Typekit 程序代码。 除了繁体中文，Typekit 亦有简体中文、日文及韩文共四种思源黑体网页字型。 Adobe Typekit 虽然不是免费服务，但也有免费方案可以选择，注册后有每月 25,000 次的浏览次数额度，对于一般个人部落格或小型网站来说其实还算充裕(当然你也可以考虑付费升级，价格不高)。 要如何让你的网站文字更美观、更有质感呢?透过下方的教学，来申请取得 Typekit，并将思源黑体加入你的网站，取代原有默认的字型吧!整体操作还算简单，不过前提是你的部落格提供商必须支持 JavaScript 语法，且要能自行修改 CSS 样式表单。 Typekit STEP 1 开启 Typekit 网站后，点选右上角的“Browse Fonts”，从 Limited Library 可以找到思源黑体系列，我们要使用的为 Source Han Sans Traditional Chinese 也就是繁体中文。 从“Source Han Sans Traditional Chinese”可以预览思源黑体在网页上的显示效果，一共七种字重，分别为 ExtraLight、Light、Normal、Regular、Medium、Bold 和 Heavy，最初网站上只提供字型下载，现在也加入了对于 Web(网页字型)的支持。 点选右上角的“Sign Up”按钮来开始注册吧! STEP 2 进入注册页面，可看到 Adobe Typekit 计价方式，其中有一个免费(Free)方案，虽然可使用的字型数量较少，但仍有每月 25,000 浏览次数额度，点选“Sign Up”选择方案。 STEP 3 接着输入你的姓名、Email、密码、国家和生日来注册账号，如果你已经有 Adobe ID 的话也可直接登入开始使用。 STEP 4 注册后登入 Adobe Typekit，回到 Source Han Sans Traditional Chinese 页面，点选右上角绿色的“+ Use Fonts”按钮。 跳出如下窗口后，先从上方的标签选择“Web”，然后点选 Create a new kit 来建立一个新的网站设定。 STEP 5 跳出一个 Create a Kit 新窗口后，设定一下要建立的网站名称、网址，因为这段程序代码会限制于你设定的域名上使用，网址部分一定要设定正确喔! 范例可参照以下灰色文字，无须填入 ，只要输入你的域名部分即可。 设定完后，就会产生 Install JavaScript 画面，底下就是你要加入网页的程序代码。不过先别急着复制，点选“Continue”回到 Typekit 网页来看看有没有其他设定选项。 STEP 6 回到 Typekit 网页，将鼠标光标移动到右上角的“Kits”，会显示你刚才设定好的网站名称，点一下开启设定，会出现如下画面。 从这里可以设定要使用、加载的思源黑体字型字重，默认只会有 Regular 和 Bold ，为了避免让字型加载速度变慢，建议维持默认值，除非你有特殊的需求。 点选左上角的“Using fonts in CSS”可以看到详细的 CSS 设定方法，假如你要在标题部分使用思源黑体的话，只要加入一段 font-family 设定值，这部分就不多做说明。 STEP 7 最后点选右下角的“Publish”来发布设定更新，Typekit 就会把 JavaScript 程序代码显示在网站上啰!使用者只需要复制这段程序代码，然后把它放到网页</body> 之前，就能在网页内加载思源黑体，让整体阅读效果更理想、更与众不同。 至于要如何查看用量情形呢?可以从 Typekit 右上角的“Account”来看目前用量，免费方案除了有每月 25,000 次的浏览次数限制外，可加入网站数量只有一个，能选用的网页字型则有两个。 如果用量超过会怎么样呢?其实就只有网页字型的样式无法加载而已，完全不会影响网站的显示或阅读，倒也不用太过担心。 值得一试的三个理由： 思源黑体网页字型(Webfont)，已经可以在 Typekit 取得使用 支持繁体中文、简体中文、日文及韩文，提供七种可选用字重 免费方案每月可使用 25,000 次浏览配额
⑼ web font怎么使用中文网页字体
1、在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。
浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：
font-family:"Comic Sans MS","幼圆","黑体",sans-serif;
按照W3C标准，浏览器在解析一行代码时首先会在系统中查找Comic Sans MS字体，如果系统内存在这个字体那么浏览器就会使用Comic Sans MS字体，如果没有的话就接着查找幼圆字体，以此类推直到浏览器可以表达系统存在的字体为止。
注意了，“sans-serif”不是某个字体的名称，而是一种在前面叙述的字体都无效时而最终选用的字体，称为浏览器通用字体，它取决于你所用的浏览器默认的通用字体是什么，可能是“Arial”，也有可能是“Helvetica”。
2、网页常用字体通常分为5类：serif(衬线)、sans-serif(无衬线)、monospace(等宽)、fantasy(梦幻)、cuisive(草体)，这些通用的名称允许用户代理从相应集合中选择一款字体。
serif 字体在字符笔画末端有叫做衬线的小细节，这些细节在大写字母中特别明显。
sans-serif 字体在字符笔画末端没有任何细节，与serif字体相比，他们的外形更简单。
monospace 字体，每个字母的宽度相等，通常用于计算机相关书籍中排版代码块。
fantasy 和 cuisive 字体在浏览器中不常用，在各个浏览器中有明显的差异。
3、网页常用字体
Sans-serif:
Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的“克隆”，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Lucida Family: Lucida Grande是Mac OS UI的标准字体，属于humanist风格，稍微活泼一点。Mac下的显示要比Win下好。
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Tahoma: 也是humanist风格，字体和Verdana有点像，但是略窄一些，counter略小，曾经是Windows的标准字体，Mac 10.5之后默认也有安装。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。
Serif：
Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。
中文：
宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。
4、写个小demo，在各种浏览上测试了一下，各种浏览器对这个字体的解析还是有差异的。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>font</title>
<meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>
<meta name="author" content="@my_programmer">
<style type="text/css">
/*重置{*/
*{ padding:0;margin:0;} img{border:0;} li{list-style:none;}
/*}重置*/
div{font-size:1.2em;}
</style>
</head>
<body>
<br/>
--网页字体通常分为5类--
<div style="font-family: sans-serif;">你好 hello world sans-serif(无衬线) </div>
<div style="font-family: serif;">你好 hello world serif(衬线) </div>
<div style="font-family: monospace;">你好 hello world monospace(等宽) </div>
<div style="font-family: fantasy;">你好 hello world fantasy(梦幻) </div>
<div style="font-family: cuisive;">你好 hello world cuisive(草体) </div>
<br/>
--无衬线类--
<div style="font-family: Helvetica, sans-serif;">你好 hello world Helvetica </div>
<div style="font-family: Arial, sans-serif;">你好 hello world Arial </div>
<div style="font-family: 'Lucida Grande', sans-serif;">你好 hello world Lucida Grande </div>
<div style="font-family: Verdana,sans-serif;">你好 hello world Verdana </div>
<div style="font-family: Tahoma, sans-serif;">你好 hello world Tahoma </div>
<div style="font-family: 'Trebuchet MS', sans-serif;">你好 hello world Trebuchet MS </div>
<br/>
--衬线类--
<div style="font-family: Georgia, serif;">你好 hello world Georgia </div>
<div style="font-family: Times, serif;">你好 hello world Times </div>
<br/>
--中文字体--
<div style="font-family: 宋体">你好 hello world 宋体 </div>
<div style="font-family: 微软雅黑">你好 hello world 微软雅黑 </div>
<div style="font-family: 华文细黑">你好 hello world 华文细黑 </div>
<div style="font-family: 黑体">你好 hello world 黑体 </div>
</body>
</html>