问题对人有帮助，内容完整，我也想知道答案
问题没有实际价值，缺少关键内容，没有改进余地
维基百科的,
在chrome和oprea里打开，字体明显不一样。
我看了一下源代码，写得都是
font-family: sans-
难道浏览器的默认字体会不一样么？
前端新人请教。
来源: 101 新手上路
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
这个问题我在SO上问了，大家可以看。
原来在chrome里有默认的字体设置，wiki的网站太懒没有把字体写全，加上我chrome里面默认是宋体，所以导致的这个现象。
答案对人有帮助，有参考价值
答案没帮助，是错误的答案，答非所问
（第101个回答，在101板块什么的。）
先解释一下Generic-family。Generic-family是可用于font-family的一类值，它只有五种可能：serif、sans-serif、monospace、cursive、fantasy，用于表示一类字体。由于它的优先级高，覆盖面广，一般会写在最后，用作最终的Fallback的选择。
font-family匹配机制的流程大致如下(图片由graphviz绘制)：
IE系列仅仅提供一个用于最终的fallback的默认字体设置（在上图中Default这一步），如下图，IE11的截图。
Chrome这个过程中比较特殊的一点是，它还可以针对不同的generic-family设置不同的字体（在G3这一步）。
Firefox和chrome一样：
关于font-family，可以highlight一下，基本上把机制都给写透了。
（鉴于现在中文互联网的优质前端资源很容易消失，建议回来慢慢啃）。
分享到微博？
你好！看起来你挺喜欢这个内容，但是你还没有注册帐号。 当你创建了帐号，我们能准确地追踪你关注的问题，在有新答案或内容的时候收到网页和邮件通知。还能直接向作者咨询更多细节。如果上面的内容有帮助，记得点赞 (????)? 表示感谢。
明天提醒我
关闭理由：
删除理由：
忽略理由：
推广（招聘、广告、SEO 等）方面的内容
与已有问题重复（请编辑该提问指向已有相同问题）
答非所问，不符合答题要求
宜作评论而非答案
带有人身攻击、辱骂、仇恨等违反条款的内容
无法获得确切结果的问题
非开发直接相关的问题
非技术提问的讨论型问题
其他原因（请补充说明）
我要该，理由是：前端在线资源
本文地址：
一、浏览器默认字体
众所周知，浏览器字体默认的设置为“宋体/simsun字体 16像素”，例如Chrome浏览器下：
二、CSS中设置的字体
考虑到兼容性，我们总会在CSS中队字体进行一些设置，这类设置往往设置在body标签上，无论是人人网，腾讯网，淘宝网，开心，新浪，网易等都是如此。以下为各个大型网站的body的字体设置：
body{font-family:Tahoma,Verdana,STHeiTi,simsun,sans-}
其中simsun为中文字体。
body{font-family:"宋体","Arial Narrow";}
body{font:12px/1.5 tahoma,arial,sans-}
body{font-family:'lucida grande',tahoma,helvetica,arial,'bitstream vera sans',sans-}
html{font-family:Arial,Helvetica,sans-serif,"宋体"}
body{font:12px/20px Tahoma,Verdana,Arial,sans-}
本文原地址：，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。
本文作者：，欢迎访问我的个人网站。
三、浏览器默认字体与CSS字体间的关系
要说关系，很简单，就是CSS字体的级别大于浏览器默认字体的级别。但是，在中国，作为中文网站，中文用户，中英文之间的差异使得故事的发展变得生动有趣了，这也是本文的所讨论的关键所在。
咱们不急，今天荷兰和日本对的比赛反正耗得很，听我娓娓道来~~
应该都知道，浏览器的默认字体是可以更改的，例如IE浏览器，见下图：
或者是Firefox浏览器，工具 -> 选项 -> 内容，见下图：
我们现在将默认字体由“宋体”改成“微软雅黑”，再看看第二部分提到了这些网站页面的字体表现：
下图全部截自Firefox3.6浏览器下，在IE浏览器下修改默认字体也会得到类似的结果，您可以自己试一试，下图顺序与第二部分出现的网站列表是一一对应的，图上已标明了浏览器默认字体“微软雅黑”是否起作用的情况。
本文原地址：，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。
本文作者：，欢迎访问我的个人网站。
可以看到，人人网，淘宝网以及腾讯网下，页面上的字体依然长得就像是“宋体”一样，也就是说，修改浏览器的默认字体对其一点效果都没有；但是在开心网，新浪微博，白社会（以及我的博客）这些页面上，字体的表现就是微软雅黑效果。为什么会有这些差异呢？
究其原因，不难理解。在本文的第二段落，将上述网站最顶级标签的font属性都罗列了出来，这是有原因的。仔细观察相应网站的body/html设置的font/font-family属性，相信您会找出表现差异的原因了——凡是浏览器默认字体不起作用的页面都是在CSS中设置了中文字体的页面。例如，人人网的simsun字体，腾讯网的“宋体”，淘宝网的“宋体”，只要在font/font-family属性中出现了对中文字体的设置，那么浏览器的自定义的默认字体就会失效，不起作用。OK，这里还有个看似“例外”的情况，就是新浪微博的页面，其html标签的CSS字体样式是：html{font-family:Arial,Helvetica,sans-serif,"宋体";}，其也设置了含“宋体”的字体属性啊，为何页面上的表现依然是“微软雅黑”的效果而与腾讯网、淘宝网不一样呢？我之前就提过新浪微博的页面重构的水准与其新浪网的地位不匹，从这个font-family属性的设置可见一斑。我们在设置font-family属性是会在最后带有sans-serif或是serif，其分别表示“无衬线字体”和“衬线字体”，这个东东不是厕所里的屁屁——随便放的，我个人认为，其作用为终结，终结font-family属性，也即是说跟在sans-serif/serif后面的字体都是聋子的耳朵——摆设。所以新浪微博页面字体设置html{font-family:Arial,Helvetica,sans-serif,"宋体";}中的“宋体”压根就是多余的，永远也不会起作用，只会加大CSS文件尺寸的冗余代码。如果将“宋体”调至”sans-serif”的前面，那么情况就会大不一样。
本文原地址：，来自张鑫旭-鑫空间-鑫生活，访问原出处更多优秀技术文章。
本文作者：，欢迎访问我的个人网站。
四、与用户体验与页面可用性之间的关联
我们为什么要在body中设置font-family属性，其一就是在于统一，也就是所谓的兼容性，其二就是让英文字符更好看，“宋体”下的英文字符看多了会让人觉得蹩脚的……所以我们会设置font-family: 或是font-family:T这是需要的。对于中文站点，这类英文字体的设置依旧留下了中文的突破口。要知道，这些英文字体对中文文字的表现是没有影响的（这里仅指单纯的文字表现，对齐、下划线等问题不予考虑），英文字体仅对英文字体及一些字符有影响，中文字体依旧勃起，处于真空的裸露的状态，这种裸露直接裸给了浏览器，也就是说英文字体下的中文字体仅受浏览器的默认字体影响，于是这就牵涉到了一个页面可用性的问题。
有一部分用户，虽然是一小部分，但是他们喜欢使用自定义的中文字体，拿我身边的事情举例吧。我有几个同事就喜欢“微软雅黑”字体，他就是把浏览器的默认字体设成了“微软雅黑”。根据他的口述，在他看来，访问一个网站，发现这个网站的字体不是他自定义的字体，他会有些许的挫败感，如果一个网站可以接受他修改的字体，以“微软雅黑”的形式显示，其对这个网站的认同感也会提升。由于“英文字体下的中文字体仅受浏览器的默认字体影响”，这类仅仅设置了英文字体的网站在我的这几个同事心中的分值无形中就提高了，而强制了中文字体的网站分值会下降。
我们可能仅仅是忽略而已，仅仅是不知道而已！对于中文网站，我们的用户绝大多数是中文用户，在页面上设置中文字体属性(宋体/simsun)会降低页面的可用性和潜在的用户体验。如今的web，好的产品往往是可以满足用户的个性需求和自主能动性。页面上中文字体的设置会扼杀浏览器的默认中文字体，无法让用户以自己喜欢的中文字体显示。所以，我个人的倾向是，不要再CSS中，至少在body/html这类标签上设置中文字体。
我本想把本文的题目定为“不要再CSS中定义中文字体”，这样的题目更有噱头，但是……（我要转折）。因为我突然想到，有些网站就是不让你使用您自己定义的字体，比如网站可能会使用“微软雅黑”与“宋体”来区分中文与标题，如果网站中文字体可以提过浏览器自定义，例如“微软雅黑”，则标题与正文字体一致，反而增加了阅读浏览负担，降低了用户体验。
所以，到底哪种做法更好，要看实际的情况，合适的往往是最好的。但是，您需要知道：在CSS中设置中文字体会让中文用户无法通过修改浏览器默认字体来按照自己的需要浏览网页。至于具体您会怎么做，那就看您自己了。
//zxx:日本队挂了~~
原创文章，转载请注明来自[]
本文地址：
（本篇完）
相关文章 (0.576) (0.438) (0.379) (0.335) (0.276) (0.252) (0.197) (0.176) (0.165) (0.165) (RANDOM - 0.010)
标签： , , , , , , , , ,
赞助商推荐()：
想学到点真东西？
如果你有1~3年前端开发经验，不妨
想找个师兄入门前端？不妨
想成为高薪全栈工程师？
热门总排行10 个改善网页可读性的实用排版技巧 - Web前端 - ITeye资讯
相关知识库：
网页的排版问题常常被忽视。这挺遗憾的，如果你能改进你的网页排版，那么设计和可读性也就随之改进。在这篇文章中，介绍了10个非常有用的排版技巧，可以使你的网站看起来更好。
1. 设置正确的行高
最常见的网页排版错误之一绝对是错误的行高。行高用来定义文本行的高度，所以它必须要根据字体大小进行设置。
一般来说，当我设置文本行的高度时我总是再给字体大小增加7个像素的行间距（字体大小为12至15个像素）。
BODY {
字体大小：14
行高：21 / * 14px + 7px * /
}
2. 设置正确的标题间空白
另一个常见的错误是标题周围的空白。标题是与它下面的段落相关联的，它不是两个段落之间的分隔符。这就是为什么一个标题的上边缘空白应该比下边缘的空白宽。
3. 不要使用太多不同的字体
为了保证网页的可读性和专业性，你不应该使用超过3种不同的字体。使用太多的字体会给读者带来困扰，也会使你的页面看起来杂乱。
另一方面，使用更少的字体，使你的页面看起来整洁和易读。你可以让标题使用一种字体，正文使用一种字体，标语和副标题使用另一种字体。
4. 使用等宽字体来显示代码段
如果你是一个开发人员，你可能想把一些代码片段放在你的博客上。如果是这样，请使用等宽字体显示你的代码片段。那么，什么是等宽字体？这个字体的字母和每个字符占有相同数量的水平空间。
那么，在一个网站上应该用什么字体显示代码片段呢？Courier字体是目前最流行的，但是为什么不尝试使用目前最新的字体，如Consolas 或者 Monaco？如果你想选择更多的字体，你一定要看看。
5. 注意对比度
如果你的网站排版很好，那么另外一点要考虑的就是对比度。如果你的页面背景是灰色（#999999），那么不要使用深灰色的文本（#333333），否则你的内容可能难以辨认，尤其是老年人或者视力不好的人。
一般来说，如果你的网站是与黑客、黑帽SEO或哥特摇滚等有关，你应该使用浅色背景和深色的字体形成鲜明的对比，增强你的网站的可读性。
6. 保证有划线的文本可以链接
自从我12年前使用互联网开始，浏览器的默认链接格式是一个带下划线的蓝色字体文本。尽管蓝色常常会改变为其他颜色，下划线一直是公认的链接格式。这就是为什么有下划线的文本通常被认为是可以链接的，而不是其他的意思。否则，这将会给你的读者带来很大的困扰。
7. 创建一个样式库
让你的网站给读者带来视觉震撼的一个简单而有效的方法是为特定的用户创建特定的风格。例如，创建.warning CSS类向读者显示警告信息。
8. 标题和文本有层次感
为了提高网页的可读性，给标题、简介、段落和正文创建出层次感是非常重要的，这样你的文章非常形象的呈现给读者，他们会迅速找到感兴趣的部分。
9. 不要担忧页面有空白部分
我所知道的最好的排版建议之一是：“不要害怕页面有空白部分”。它可以使你的页面看上去整洁和专业。很多人都喜欢苹果的网站风格，原因是：网页虽然复杂精细，但页面简单并有大量的空白区域。
10. 使用正确的符号
如果你正在寻找方法改善你的排版，很重要的一点是使用正确的符号。例如，可以使用双引号（“”）来代替（""）。或者你也可以试试HTML字符编码 &s; & 。
英文原文：
第一个，行高应该用em吧，比如1.5em。而不应该用21px这样。
太简洁了。无语【求帮助】使用https协议访问页面F5刷新后字体样式不一致【web前端开发吧】_百度贴吧
&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&&签到排名：今日本吧第个签到，本吧因你更精彩，明天继续来努力！
本吧签到人数：0成为超级会员，使用一键签到本月漏签0次！成为超级会员，赠送8张补签卡连续签到：天&&累计签到：天超级会员单次开通12个月以上，赠送连续签到卡3张
关注：46,771贴子：
【求帮助】使用https协议访问页面F5刷新后字体样式不一致收藏
IE11中输入 ，界面字体是略粗的字体按F5刷新之后变成了微瘦的字体css的字体样式用的是自定义的：@font-face {
font-family: 'telef_regular';
src: url('../fonts/Telef/TelefWeb-Regular.eot'); /* IE9 Compat Modes */
src: url('../fonts/Telef/TelefWeb-Regular.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('../fonts/Telef/TelefWeb-Regular.woff2') format('woff2'), /* Super Modern Browsers */
url('../fonts/Telef/TelefWeb-Regular.woff') format('woff'), /* Pretty Modern Browsers */
url('../fonts/Telef/Telef-Regular.ttf')
format('truetype'), /* Safari, Android, iOS */
url('../fonts/Telef/TelefWeb-Regular#svgFontName') format('svg'); /* Legacy iOS */}body {
font-family: 'telef_regular' !}1、比较了下刷新前和刷新后的页面源代码和样式，每一行都一样的。2、比较了下页面请求，区别在于F5刷新后比之前多请求了一些字体初始请求了字体：Telef-Regular.eotF5刷新后依次请求了Telef-Regular.eot，Telef-Regular.woff，Telef-Regular.ttf3、使用http协议访问的话刷新之后字体没有变化4、a链接使用window.location.href=window.location.href方法，点击a链接进入页面，字体不会发生变化。a链接使用window.location.reload();方法，点击a链接，字体发生了变化，字体效果和F5刷新一样求各位大神帮助，无法上传截图和页面代码，请见谅
2017年热门岗位,7万名企紧急招聘!慕课网专业讲师倾情打造前端工程师入门课程!系统化学习,精心服务,结合真实开发案例,提升学习效果,带你快速入行!直达名企!
现在定位出来不是字体样式的问题，是因为nginx,conf中没有配置读取字体的缓存。 location ~ .*\.(gif|jpg|jpeg|png|bmp|swf|tmp)${
expires 30d;}现在正在研究这些东西怎么配置，对于nginx我也也是一窍不通啊，谢谢大家！
登录百度帐号推荐应用网站页面排版-网页在各浏览器中的兼容性_百度文库