我给一个网站提了一个关于网页字体设置的建议，是不是提的不对

[NetDreamer]

我对新首页提点意见： 字体应该区分 SANS，SERIF 和 MONO SPACE。而不是简单的指定某种特殊字体；尽量不用粗体。 我的系统是Ubuntu Linux，打开首页一片宋体字。 建议大标题用SANS，内容用Serif。

这是我对某网站提的意见，提之前我怀疑他们在样式设置里简单的设置了“宋体、黑体”等具体的字体，而不是Sans、Serif等字体类别。造成非Windows用户字体显示效果不佳。

我用的是Chromium，字体设置如图：

但是用Firefox，基本相同的字体设置，相同的网站，Firefox就显示的是微米黑（我认为它是一种Sans字体）。

再回到我给网站提的建议，我提的是不是不对啊。那就让人家笑话了。各位不要笑话我就好。

[YeLee]

当然，这还得看什么网站吧，假如Linux是特例的话，那是活该被无视。
不过，我记得很多人都是直接用全名的。或者弄个列表，前面用全名，后面用三类作为后备，而且细分这三类麻烦，距离呈现设计师的原意相去甚远，用户加个字体就差不多了，没必要强求别人接受你的标准。

[qy117121]

反正我是无视网页设置 的字体的，强制用了我的

[jarlyyn]

我对新首页提点意见： 字体应该区分 SANS，SERIF 和 MONO SPACE。而不是简单的指定某种特殊字体；尽量不用粗体。 我的系统是Ubuntu Linux，打开首页一片宋体字。 建议大标题用SANS，内容用Serif。

这是我对某网站提的意见，提之前我怀疑他们在样式设置里简单的设置了“宋体、黑体”等具体的字体，而不是Sans、Serif等字体类别。造成非Windows用户字体显示效果不佳。

我用的是Chromium，字体设置如图：

Chromium.png

但是用Firefox，基本相同的字体设置，相同的网站，Firefox就显示的是微米黑（我认为它是一种Sans字体）。

再回到我给网站提的建议，我提的是不是不对啊。那就让人家笑话了。各位不要笑话我就好。

"SimSun","宋体","Arial Narrow"

[alanfly]

反正我是无视网页设置 的字体的，强制用了我的

用自己的，自己做主。

[AutoXBC]

IT168？那个主页涉及字体的全部样式表

代码： 全选

body,button,input,select,textarea {font:12px/1.125 Arial;}
.navTip1 li,.login_box,.tit3 h2,.tit4 span,.list2 li,.cheList li,.list1_2012 li,.friendly_con1 p,.list li,#footer p,.hot{font-family:"\5B8B\4F53";}
.navTip1 li a,.tit4 span a,.list2 li a,.cheList li a,.friendly_con1 p a,#footer address,.tit1_2012 span,.list1_2012 li a,.list li a,.hot{font-family:Arial;}
.big_nav dt{ float:left;text-align:center; width:21px; padding-top:8px; height:160px; color:#555; background:#fff;font:bold 14px/1 microsoft yahei,arial;}
.title h2{font:18px/35px microsoft yahei,arial; text-align:center;}
.tit5{ padding-left:9px;border-bottom:1px solid #E9ECED; color:#458FCE;font:bold 14px/29px arial;}
.tit6{ padding:1px 0 0 9px; border-top:1px solid #DCEDED;border-bottom:1px solid #DCEDED; color:#458FCE;font:14px/28px "\5B8B\4F53"; color:#DBECEC;}
.tit7{ padding:1px 0 0 9px; border-top:1px solid #FBE2D1;border-bottom:1px solid #FBE2D1; color:#f60;font:bold 14px/28px arial;}
.title2{ font:14px/25px arial; text-align:center; padding-top:12px;}
.title3{ font:bold 14px/1 arial; height:23px; padding-top:13px; border-bottom:1px dashed #ccc;}
.shuma{ float:left; width:21px; padding:18px 0 0 6px; height:94px;font:bold 14px/20px arial; background:#38A2DB; margin-left:10px; display:inline; color:#fff;}
.tit1_2012{height:31px; background:#38A2DB; font:18px/31px microsoft yahei,arial; padding:0 10px;}
.tit3_2012{font:18px/22px microsoft yahei,arial;text-align:center;}
.tit1_2012_1{height:31px; background:#38A2DB; font:18px/31px microsoft yahei,arial; padding:0 10px;}
.tit3_2012_1{font:18px/22px microsoft yahei,arial;text-align:center;}

这里有宋体雅黑和 Arial，不过内容部分确实没有指定宋体，而是用的 Arial。

Arial 是英文字体，在选择候补中文字体时，Firefox 会优先读取设置内的非衬线字体部分，另测试 Opera 也是这样处理的。用这两种浏览器你可以很简单的把网页显示成你希望的样子。

而 Chrome 在遇到仅指定英文字体的候补中文字体查找时，用了其他的处理方法，大概是读取操作系统本身的字体替代规则，然后就显示成了其他的样子比如宋体。

Chrome 是 Webkit 引擎的衍生，但是对很多 Webkit 的特性封装的不是很好。比如之前出现过 Chrome 不能指定最小字体，但是手动修改 Preferences 文件添加配置又是可以做到的。总之 Chrome 的细节处理有所欠缺，而你提给网站的建议基本不是他们的错。

[NetDreamer]

IT168？那个主页涉及字体的全部样式表

代码： 全选

这里有宋体雅黑和 Arial，不过内容部分确实没有指定宋体，而是用的 Arial。

Arial 是英文字体，在选择候补中文字体时，Firefox 会优先读取设置内的非衬线字体部分，另测试 Opera 也是这样处理的。用这两种浏览器你可以很简单的把网页显示成你希望的样子。

2012-11-24_204743_firefox.png

2012-11-24_204711_opera.png

而 Chrome 在遇到仅指定英文字体的候补中文字体查找时，用了其他的处理方法，大概是读取操作系统本身的字体替代规则，然后就显示成了其他的样子比如宋体。

2012-11-24_205433_chrome.png

Chrome 是 Webkit 引擎的衍生，但是对很多 Webkit 的特性封装的不是很好。比如之前出现过 Chrome 不能指定最小字体，但是手动修改 Preferences 文件添加配置又是可以做到的。总之 Chrome 的细节处理有所欠缺，而你提给网站的建议基本不是他们的错。

你这样解释太清楚了，谢谢！

我若干年前自学过网页设计，现在基本上忘光了，
但是还有一个问题，在样式表中，能不能制定“sans”, “serif”，而不指定像“Arial”这样的具体字体呢？

[AutoXBC]

在样式表中，能不能制定“sans”, “serif”，而不指定像“Arial”这样的具体字体呢？

我也是自学的，很多地方不一定精确。上面说基本不是他们的错，不过他们做的也是不规范的，好的设置就是你说的这种，用 CSS font-family 指定一系列候选字体，然后至少添加“sans”, “serif”等通用名字，避免出现替代规则的不确定性。
http://www.w3school.com.cn/css/pr_font_font-family.asp

不过前端设计这一部分有太多规范不清，有规范不执行，历史遗留等各种问题，一些人还是从 FrontPage 和 IE 6 Only 时代来的，很多道理是讲不清的。作为用户，我就用自己写的 User CSS，一律强制成雅黑，不去管网站的设置。

[jarlyyn]

中文字体存在font-family这回事么……

这个问题不是前端的问题。

很多时候是设计用了太多文字块，使得前端只能用指定字体，不然页面会变形。

设计的趋势就是指定字体，看看什么web font,cufon就知道了

[AutoXBC]

中文字体没有 font family 这个不知从何说起，既然叫字体，那么字体有关的术语都是通用的，W3C 从来没说是英文或者西文专属的。

这个明显就是前端的问题，设计给出了文字块，前端偷懒不想测试多个字体下的效果，不想考虑间距行高问题，所以喜欢直接写死固定字体；排版时不想考虑多分辨率，喜欢用绝对像素宽度，也不顾低分辨率用户出现横向滚动条的低劣体验。

前端虽然因为各种问题被折磨的很苦逼，但那都不是偷懒的借口。最不济，在父容器上留下适当的空间余量，就可以简单的避免不同字体的错位问题。

至于 web font，那是西文的，中文就没有可行的方案。另外如果这个就是趋势的话，那不如说 pdf 更是趋势，也不用纠结不同浏览器兼容了。

总之，网页的核心是文本流而不是排版效果，决定网页最终形态的是用户而不是 coder 或者 designer。

最后，让我们看一下 Google 是怎么做的吧。

代码： 全选

#gb{font:13px/27px Arial,sans-serif;height:30px}
#gbpm .gbmt{border-top:none;color:#000 !important;font:11px Arial,sans-serif}
.gbmpala,.gbmpalb{font:13px Arial,sans-serif;line-height:27px;padding:10px 20px 0;white-space:nowrap}
body,td,a,p,.h{font-family:arial,sans-serif}
.jhp input[type="submit"],.gssb_c input,.gac_bt input{background-color:#f5f5f5;background-image:linear-gradient(top,#f5f5f5,#f1f1f1);background-image:-o-linear-gradient(top,#f5f5f5,#f1f1f1);border:1px solid #dcdcdc;border:1px solid rgba(0, 0, 0, 0.1);border-radius:2px;color:#666;cursor:default;font-family:arial,sans-serif;font-size:11px;font-weight:bold;height:29px;line-height:27px;margin:11px 6px;min-width:54px;padding:0 8px;text-align:center}
input{font-family:inherit}
.lsb{border:none;color:#000;cursor:pointer;height:30px;margin:0;outline:0;font:15px arial,sans-serif;vertical-align:top}
.gsfi,.lst{font:17px arial,sans-serif}
.gsfs{font:17px arial,sans-serif}
.lsb{font:15px arial,sans-serif;background-position:0 -343px;background-repeat:repeat-x;border:0;color:#000;cursor:default;height:30px;margin:0;vertical-align:top}
#knavm{color:#4273db;display:inline;font:11px arial,sans-serif!important;left:-13px;position:absolute;top:2px;z-index:2}
.gscp_d{color:#aeb8cb;cursor:pointer;font:21px arial,sans-serif;line-height:inherit;padding:0 7px}

[shinery]

在自己的浏览器设置好喜欢的字体就行了。

[luojie-dune]

确实是专属的，用特定的字体有特定的范围。