今天给各位分享谷歌浏览器fan教程的知识，其中也会对谷歌浏览器下载教程进行解释，如果能碰巧解决你现在面临的问题，别忘了关注本站，现在开始吧！

本文目录

1. 我想要serif和sans serif的历史～～谢谢大家哈
2. 如何让谷歌自动翻译网页中选中文字

一、我想要serif和sans serif的历史～～谢谢大家哈

棕熊@Think Fast棕熊@Think Fast127.0.0.1,

sweet 127.0.0.1<3博客园社区首页新随笔联系管理订阅随笔- 21文章- 0评论- 489

[教程]谈谈网页设计中的字体应用(2) serif和 sans-serif

上一次我们简单的谈了一下font set和一些要注意的基本问题。今天我们继续字体这一话题，深入讲讲上次提到的“通用字体族”。首先是最常用的 serif和 sans-serif这两个通用字体族。

Serif在印刷学上指衬线字体。为了理解衬线字体的概念，大家先看几个典型的衬线字体的例子：

单词 My中的字母“M”上下方突出的短横线就是所谓的衬线。同样，y的上方，K的上下，i和n的下方也都有衬线，所以这些字体都被称为衬线字体。但衬线字体并不一定都有衬线，比如上面例子中的g,“汉”和“字”。事实上，只要满足末端加强原则的字体都是衬线字体。所谓的末端加强，就是使用衬线或粗细变化，使字体笔画的末端得到加强，以改善小号文字的可读性。比如上面例子中的y的下半部分，还有宋体的中文字符，都是采取加粗笔划的末端来达到末端加强的效果。除此之外，很多衬线字体还会采用加强竖向笔划（比如宋体中竖比横粗），夸张字形（最明显的就是小写g这个字符了）等方法进一步改善它的可读性。

因为衬线字体的可读性非常好，所以它应用的最多的地方也正是出版物或者印刷品的正文内容等以大段文字作为表现形式的作品上。

比较常见的衬线字体有 Georgia, Garamond, Times New Roman,中文的宋体等等。

衬线字体以外的一切字体都是无衬线字体。sans-这个前缀其实是法语，所以比较标准的发音是/san/而不是/sans/。它的意思是“没有”。所以sans-serif就是无衬线字体。

无衬线字体比较圆滑，线条一般粗细均匀。比较适合用作艺术字、标题等。因为无衬线字体通常粗细比较均匀，所以在小字体显示的时候，可读性会降低，容易引起视觉疲劳。

常见的无i衬线字体有 Trebuchet MS, Tahoma, Verdana, Arial, Helvetica,中文的幼圆、隶书等等。

-什么时候用serif？什么时候用sans-serif？

从上面的介绍中，我们可以知道，衬线字体之所以被设计出来，就是为了用作正文内容的。大家可以随手抄起一张报纸，看看上面的文章是不是宋体。如果手头有外语读物的话，也可以翻来看一下，正文都是衬线字体。同样大小的衬线字体比无衬线字体容易阅读：

The quick brown fox jumps over the lazy dog.

The quick brown fox jumps over the lazy dog.

然后大家可以把报纸翻到头版头条——标题一般都会是各种粗细一致的综艺体或者是中黑体。英文报纸的标题大多也是无衬线的。这个就是应用他们的基本原则。

但是大家可以看很多网站——它们的正文内容恰恰是无衬线的Tahoma, Verdana, Arial等等。中文网站可能因为字体的局限性，仍旧使用宋体居多，但查看它们的样式表，就会发现候补字体也大多是无衬线的。这样是不是不好呢？

衬线字体的可读性其实仅仅体现在小字体上。大家可以拿出刚刚抄起来的报纸，和你显示器上的文字比较一下——你会发现，报纸上的文字比显示器上的文字整整小一圈。实际上，新明晚报上通常大小的宋体文字，在点距为0.25mm的高质量液晶显示器上，大小大约只相当于10px~ 11px的显示字符；在普通的液晶显示器（点距一般为0.28mm）上，甚至可能只相当于8px~10px的显示字符。

这个就是 print media和 screen media的最大区别。印刷业为了节约成本，因此会尽可能的在保证可读的情况下，把文字印小。显示器不存在这样的成本，因此可以显示比较大的文字。在文字足够大的情况下，无衬线字体也是同样可读的。而且因为无衬线字体通常有艺术性，因此在显示器上显示通常比较赏心悦目；而且无衬线字体种类比衬线字体多得多，因此选择余地也很大。所以大家尽可以放心去使用。但是必须保证以下原则：凡是使用无衬线字体的，必须保证其在正文内容中的可读性。否则，使用衬线字体。换而言之，如果你要使用无衬线字体显示网页的正文内容，那么，你必须把它的font-size设的足够大，以保证用户能轻易阅读。

至于具体将font-size设多大，是因字体而异的。12px对于 Verdana来说已经完全足够，但是要能轻易的阅读隶书，可能需要24px以上才行。

对于11px以下的英文字体，推荐使用衬线字体。至于中文，因为显示器的硬件限制，不论是什么字体，都不推荐使用11px以下的font-size来显示。

印刷学中，除了serif和 sans-serif之外，通常还有 monospace等宽字体、scripts手写体（比如花体）、blackletter铅字体（也叫 gothic哥特体。严格的说，很多常用的serif字体其实是gothic字体）、ornamental装饰体（那些在文字笔划上或者周围有装饰花纹的字体。很多中世纪书籍上很常见。如果脑残体真的成了字体，那么应该可以算装饰体吧……）和 symbol符号字体（比如有名的wedding123……）。

不过CSS对通用字体族的定义有点不一样。除了serif和 sans-serif之外，CSS还允许以下几个通用字体族：

所谓的等宽字体，是指每个字符宽度都一致的字体。一个著名的例子就是 Courier New字体。因为字符宽度一致，所以特别容易对齐，能快速精确的定位到某行某列，因此经常用来显示代码。

要注意的是，一个等宽字体同时也可以是一个衬线（或者非衬线）字体。比如 Courier New这个字体也可以看作是一个serif（严格的说是gothic）字体。

cursive书写体：相当于印刷学中的手写体。中文的华文行草就是这样的一个字体。

fantasy梦幻体：相当于印刷学中的装饰体。非常少见的一种字体，基本没有参考价值。

要注意的是，CSS中不支持symbol字体族。使用symbol类的字体请用图片。

中文的黑体其实是衬线字体。大家可以看下面的图：

大家可以看到，其实黑体的确是经过末端加强的，所以很多印刷品的正文也会使用黑体。像这种使用温和的末端加强，笔划粗细大致一致的字体，其实也可以被称为petit-serif/小衬线体。（那些类似于宋体一样有显著末端加强，并且笔划粗细有明显区别的，通常称为slab-serif/雕版衬线体）

只是很遗憾，因为诸多的硬件原因，在显示器上实际显示黑体时，大家还是可以把它看作一个无衬线字体

斜体是oblique。Italic顾名思义，是意大利体。Italic是一种书写方式（calligraphy script），而oblique是一种印刷样式，两者是不同的东西。中学英语习字册交授的书写方式就是意大利体。除了意大利体外，比较流行的书写方式还有法兰西体（就是传说中的花体字，正名是French Script）、哥特体、亚伯拉罕体等等。

很多考究的字体都会为意大利体定制一套特殊的字体，而不是简单的显示成斜体。比如下面的图片里，三行文字都是Georgia字体。第一行普通；第二行是oblique，也就是斜体；第三行才是真正的italic意大利体。

大家仔细看第三行的a, l, i, e等字母——很明显的看出区别了吧。实际上，Georgia Italic和 Georgia在系统内是两个不同的字体文件。当我们指定 font-style: italic的时候，系统就会自动搜寻是不是存在Georgia Italic这个字体，并尝试使用这个字体来显示文字内容。

按理说当我们用 font-style: oblique指定字体样式时，浏览器不应该去寻找Georgia Italic这个字体，而直接将Georgia字体倾斜显示，所以理论上应该得到图中第二行文字的效果。可惜，连W3C在CSS规范中，自己的参考实现也说是“如果UA不能正确显示italic和oblique,可以使用italic来代替oblique显示”，所以几乎没有浏览器实现区分italic和oblique。哪怕你设置的font-style是oblique,你也会发现，浏览器显示的也还是italic

今天就到这里了。下一讲我会谈谈如何构建一个合理的font-family，并推荐几个使用的字体组合给大家。那么，再见了哟

Tag标签:初学,教程,VI设计,心得,字体,font,css,font-family

posted@ 2008-05-06 00:19棕熊阅读(5219)评论(37)编辑收藏网摘所属分类: CSS标准，又见标准VI设计

回复引用查看#1楼 2008-05-06 01:31|镜涛

回复引用#2楼 2008-05-06 06:02|飞雪尔 [未注册用户]

不错，之前研究过衬线无衬线字体，不过我自己倒是很喜欢无衬线的微软雅黑，在LCD显示和打印的表现上比宋体强太多了。

回复引用查看#3楼 2008-05-06 07:25|生鱼片

回复引用#4楼 2008-05-06 07:30|炎藤 [未注册用户]

回复引用#5楼 2008-05-06 07:49| zjfeiye [未注册用户]

好文，学了不少，很多东西以前都是知其然不知其所以然，只知道这么去用

另外，经常看见CSS引入的Link中有个media=“screen”是否就是楼主提到的意思呢？

回复引用查看#6楼 2008-05-06 08:22|李战

回复引用查看#7楼 2008-05-06 09:27| JackMa

很好，很专业。世事洞明皆学问。这个Blog也很有特色啊。

回复引用查看#8楼 2008-05-06 09:27| Yannic Yang

一直在考虑我的dopod手机上到底用雅黑好还是宋体好

我决定用雅黑然后把字体变大一号

我还停留在几年前讨论用table还是div的时代

回复引用查看#9楼 2008-05-06 09:44|想爱就去爱吧

回复引用查看#10楼 2008-05-06 09:44| airwolf2026

回复引用#11楼 2008-05-06 09:48|一个农民 [未注册用户]

太有才了,请问楼主,我的衣橱的单色小图标是用什么工具做的,最近我在研究xara xtreme,楼主有用过吗?

回复引用查看#12楼 2008-05-06 10:06|杨正祎(阿一)

中间一个大大的“禁”字吓了我一跳，还以为是18禁网站呢。呵呵呵。。。

回复引用查看#13楼 2008-05-06 10:07|杨正祎(阿一)

那个是指定css的使用终端。显示器，还是打印机，还是其他……

回复引用查看#14楼 2008-05-06 10:42|小生

回复引用查看#15楼 [楼主]2008-05-06 10:49|棕熊

雅黑的好处就是它是一个专门设计用来显示的字体，所以它对显示做过优化，自然是比较理想的选择

不知道你说的是哪个图标？我的衣橱上一般的图像都是photoshop搞的（而且不是我搞的）

一般我自己做图形设计都会用adobe的那一套了，其他的图形设计软件基本不常用

这个是用来测试人品的阿哈哈……

开个玩笑。其实用这个字，是因为这个字包含横竖撇捺勾，而且笔划密度很合适演示。

回复引用查看#16楼 2008-05-06 10:58|平静中的疯狂

回复引用#17楼 2008-05-06 12:03| sorcom [未注册用户]

确实大牛。不过页面打开始终较慢。

回复引用查看#18楼 2008-05-06 12:42| Cat Chen

中文研究字体的人确实很少，能够有人说说字体的问题真好。

回复引用#19楼 2008-05-06 15:11| soaroaroar [未注册用户]

咳咳...这个...其实此文内容只要是认真配过linux环境字体和浏览器都知道...不能算新鲜，但还是很感谢楼主的辛勤劳动~这对于教育眼界狭窄的IE开发社群是很重要的

回复引用查看#20楼 2008-05-06 20:58|二手的程序员

那个"汉字"两个字使用的是网页默认字体,当用户把网页默认字体设定为其它字体的话,就不会显示为宋体了.

回复引用查看#21楼 [楼主]2008-05-07 00:17|棕熊

这个其实是一个字体名称alias的问题

因为这个blog是用Live Writer写的，所以在根本就没注意的情况下Live Writer自动将源代码中的中文字体名称转换成了alias，所以只有IE下才正常了

现在在博客园的编辑器里改了下，应该没问题了

回复引用查看#22楼 2008-05-07 09:37|二手的程序员

看样子你也是个极端追求完美的人

回复引用查看#23楼 2008-05-07 11:11|狼Robot

回复引用查看#24楼 2008-05-07 12:18| Rivers Zhao

回复引用查看#25楼 2008-05-07 13:02| GoGoSonny

回复引用查看#26楼 2008-05-09 10:08| jason_lb

rss每讲必读，firefox下浏览很舒畅

回复引用查看#27楼 2008-05-11 10:22| jasonoiu

回复引用查看#28楼 2008-05-11 23:13| volnet（可以叫我大V）

博主让我知道了很多前所未闻的东西，激动啊……

很关心最后那些oblique和Italic之间的区别楼主是如何知道的？不小心撞到的还是特地研究的，那动机呢，哈哈，要是你不说两个有区别我压根不会知晓啊。哈哈。

回复引用#29楼 2008-05-25 21:37| hax [未注册用户]

汉字不要11px以下并非硬件限制，而是没有11px以下的点阵字。而矢量字方面，因为汉字笔画较多，很难缩小到一定比例之下仍保持可辨识。西方文字使用hint技术来提升小分辨率下的矢量字体，但是汉字很难做到，因为字数太多，制作hint的成本过大。

回复引用#30楼 2008-06-01 11:42| southsiberia [未注册用户]

牛啊，我有两个问题想问你，西里尔文和阿拉伯文都是拼音文字，不像汉语，例如如果用户本地计算机没有相关字体的话网站一般都会制作成EOT文件，在用户第一次打开网页的时候自动加载这些文字字体（我做了10几次EOT文件，但是时而失败时而莫明其妙的成功，让人无语啊！），有没有替代方案除了flash矢量（我自己也不太清楚）.

还有个问题就是阿拉伯文和汉语混排的时候如果汉字12px可能很好看，但是对于阿拉伯文来说就字体大小太小可能会不好看，如何分别定义不同文字字体大小？

回复引用查看#31楼 [楼主]2008-06-03 10:31|棕熊

--引用--------------------------------------------------

southsiberia:牛啊，我有两个问题想问你，西里尔文和阿拉伯文都是拼音文字，不像汉语，例如如果用户本地计算机没有相关字体的话网站一般都会制作成EOT文件，在用户第一次打开网页的时候自动加载这些文字字体（我做了10几次EOT文件，但是时而失败时而莫明其妙的成功，让人无语啊！），有没有替代方案除了flash矢量（我自己也不太清楚）.

还有个问题就是阿拉伯文和汉语混排的时候如果汉字12px可能很好看，但是对于阿拉伯文来说就字体大小太小可能会不好看，如何分别定义不同文字字体大小？

--------------------------------------------------------

这个具体没有怎么研究过，各浏览器对@font-face的支持本来就比较汗，何况ms EOT文件还是个IE only的东东？

至于字体大小，其实有个css规则叫font-size-adjust，可惜也不是所有主流浏览器都支持。目前可以在这种混排的汉字外面加一个<span lang="zh" class="zh">，再去设这个span的样式，酱紫

回复引用查看#32楼 [楼主]2008-06-03 10:33|棕熊

--引用--------------------------------------------------

volnet（可以叫我大V）:博主让我知道了很多前所未闻的东西，激动啊……

很关心最后那些oblique和Italic之间的区别楼主是如何知道的？不小心撞到的还是特地研究的，那动机呢，哈哈，要是你不说两个有区别我压根不会知晓啊。哈哈。

--------------------------------------------------------

这个是以前学印刷学的时候学得啦，呵呵

回复引用#33楼 2008-06-03 19:14| southsiberia [未注册用户]

多谢楼主解答，郁闷中。。。。。。。。。。。

回复引用查看#34楼 2008-06-15 11:43| Joyaspx

确实挺专业，对字体有了更多的了解了……

回复引用#35楼 2008-11-14 15:44|不不 [未注册用户]

回复引用#36楼 2009-02-19 23:31| eddie yang [未注册用户]

自己用了那么久Georgia italic，现在才知道不是叫斜体，是意大利体

回复引用查看#37楼 2009-04-11 19:51| Aaron@Live

一个多语言的网站，主要是中文和英文，以后可能会扩展，如何在CSS里设置网站的默认字体顺序而让网站达到最好的可读性和美观性？

姓名 [登录] [注册]请输入你的姓名

内容(请不要发表任何与政治相关的内容)请输入评论内容

想知道园子里有多少女程序员吗？

[热点话题]“有道难题”编程挑战赛

登录使用高级评论新用户注册返回页首

[使用Ctrl+Enter键可以直接提交]

导航:网站首页社区新闻博问闪存网摘招聘.NET频道知识库找找看 Google站内搜索

China-pub计算机图书网上专卖店！6.5万品种 2-8折！

China-Pub计算机绝版图书按需印刷服务

ASP.NET 2.0数据教程之三：母板页和站点导航

ASP.NET 2.0数据教程之十：使用 GridView和DetailView实现的主/从报表

深度金山词霸2009破解版(牛津版)（附绿色完整破解版和破解补丁下载）

Firefox社区向 Opera标准教程示好

想学习uml画图，那个能推荐下教程和工具。

Web设计创新思维--用CSS、DOM脚本和XHTML进行Web设计创新

博客园推荐技术图书：大话设计模式

牛奶咖啡：还是会寂寞 Thinking Of You

谷歌中国被暂停境外网页搜索和联想词搜索

Intel研究日：未来技术规划与概念展示

C'est sexy le ciel de Californie, sous ma peau j'ai L.A. en overdose.

除特别声明外，本站一切资源均适用于

This work by棕熊 is licensed under a Creative Commons Attribution-Noncommercial-No Derivative Works 2.5 China Mainland License

PS:这个blog目前暂时不能完美支持IE6

1. [多图尝鲜] Google Chrome试用 Tips

2.嘿嘿，插播消息，最新一期的流言终结者

3. [Quicky] block和 inline答案揭晓~另付一则，关于 word-break

4. [Quicky] block和 inline的区别是？

5. [教程]谈谈网页设计中的字体应用(4)实战应用篇·下

7. [教程]谈谈网页设计中的字体应用(3)实战应用篇·上

8. [教程]谈谈网页设计中的字体应用(2) serif和 sans-serif

9. [快报][贴图] ANSI Art的新形式- CSS-ANSI Art

10. [教程]谈谈网页设计中的字体应用(1) Font Set

11.关于本博客博皮的几点改进与释疑

13. [浅谈演示]你所不知道的HTML-从 XHTML2到 HTML5(1)

15. [图解]你不知道的 JavaScript-“this”

17.让你的网页支持 iPhone SpringBoard图标

18.稍微谈一下 javascript开发中的 MVC模式

19. Say"Hello World" to cnBlogs

1. re: [教程]谈谈网页设计中的字体应用(4)实战应用篇·下

不错的文章，令我受益匪浅！(nmgfrank)

2. re: [教程]谈谈网页设计中的字体应用(2) serif和 sans-serif

一个多语言的网站，主要是中文和英文，以后可能会扩展，如何在CSS里设置网站的默认字体顺序而让网站达到最好的可读性和美观性？

3. re: [教程]谈谈网页设计中的字体应用(3)实战应用篇·上

我想问下，熊大哥的电脑操作系统是什么？我觉得很是喜欢。。。。唔唔唔~还有字体真漂亮。(翔猫)

4. re: [多图尝鲜] Google Chrome试用 Tips

5. re:嘿嘿，插播消息，最新一期的流言终结者

1.嘿嘿，插播消息，最新一期的流言终结者(29748)

2. [浅谈演示]你所不知道的HTML-从 XHTML2到 HTML5(1)(5598)

3. [教程]谈谈网页设计中的字体应用(2) serif和 sans-serif(5219)

4. [贴图]发个自画像阿哈哈(5069)

5. [教程]谈谈网页设计中的字体应用(1) Font Set(4938)

6. [图解]你不知道的 JavaScript-“this”(4200)

7. [教程]谈谈网页设计中的字体应用(3)实战应用篇·上(3996)

8. [教程]谈谈网页设计中的字体应用(4)实战应用篇·下(3901)

9.关于本博客博皮的几点改进与释疑(3630)

10. [Quicky] block和 inline的区别是？(3329)

1.关于本博客博皮的几点改进与释疑(59)

2. [教程]谈谈网页设计中的字体应用(1) Font Set(53)

4. [图解]你不知道的 JavaScript-“this”(49)

5. [浅谈演示]你所不知道的HTML-从 XHTML2到 HTML5(1)(38)

6. [Quicky] block和 inline的区别是？(38)

7. [教程]谈谈网页设计中的字体应用(2) serif和 sans-serif(37)

8. Say"Hello World" to cnBlogs(32)

9. [快报][贴图] ANSI Art的新形式- CSS-ANSI Art(28)

10. [教程]谈谈网页设计中的字体应用(3)实战应用篇·上(27)

Blog theme THE POWER OF ROCK by棕熊

And just a remind, this theme is NOT optimized for IE6 or earlier browsers. So if you are still using it, get Firefox for your own benifits.

从网上淘的，看不懂，也许对你有帮助

二、如何让谷歌自动翻译网页中选中文字

1、当我们在用谷歌浏览器查看外国网站时，因为语言不通经常陷入迷茫，其实谷歌浏览器是可以帮助我们翻译网页内容的，下面软件帝就教大家，如何用谷歌浏览器翻译网页：

2、谷歌浏览器中翻译网页内容的具体操作过程

3、打开谷歌浏览器(Google Chrome)，点击菜单栏的三条横线，点击“设置”。

4、进入后选择选择“设置”，点击“显示高级设置”。

5、选择设置，在语言中点击“语言和输入设置”。

6、添加你要翻译成为的语言(这里选择添加中文)。

7、最后打开网页右击“翻成中文”即可。

8、通过以上步骤，就可以轻松将网页翻译成中文了，阅读再无障碍！更多谷歌浏览器相关操作教程尽在软件帝官网。另外手机用户还可以通过微信，百度小程序搜索关注软件帝查看更多相关软件使用教程，希望我们的分享能给您带来更多帮助。

谷歌浏览器fan教程的介绍就聊到这里吧，感谢你花时间阅读本站内容，更多关于谷歌浏览器下载教程、谷歌浏览器fan教程的信息别忘了在本站进行查找哦。