欢迎来到DIVCSS5查找CSS资料与学习DIV CSS布局技术！您的位置： >
> html乱码原因与网页乱码解决方法，浏览器浏览网页内容出现乱码符合解决篇（）
造成网页乱码原因主要是内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。
charset编码设置
html网页乱码效果截图
一、乱码造成原因
1、比如是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。
2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。
3、浏览器不能自动检测网页编码，造成网页乱码。
二、解决乱码方法
第一种，html网页源代码编码与中文字输入编码不同。
解决方法：
使用软件进行编辑HTML网页内容，推荐使用进行编辑和开发。
尽量不要直接使用记事本进行编辑HTML代码。
第二种，如果网页设置编码是gbk的，而数据库储存数据编码格式是UTF-8的，这个时候程序查询数据库数据显示数据前进乡程序转码即可。
例如PHP程序+mysql查询显示数据转码：
1、mysql_query(&SET NAMES 'UTF8'&); //将查询数据转码为utf8，也就是转换为utf-8
2、mysql_query(&SET NAMES 'GBK'&);//将查询数据转码为GBK,如gbk2312
在写数据库连接文件时，写成：
$conn&=&mysql_connect(&$host&,&$user&,&$password&);&mysql_query(&SET&NAMES&'UTF8'&);&mysql_select_db(&$database&,$conn);&
然后在做页面时，注意这句：
&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&
这样不管输入数据库的中文，还是页面显示，就都正常了。
在DW CS4版里，默认生成的也是utf8页面。
同样的，如果一开始写数据库连接文件时写成：
mysql_query(&SET&NAMES&'GBK'&);&
那页面也要相应变成：
&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&&
其它asp程序或其它程序语言网站根据实际情况到百度查询转换编码方法。
第三种，浏览器造成乱码。
这个可能是你网页没有设置meta charset编码造成。导致浏览器不能识别你网页默认编码类型。解决方法：
1、如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。
在IE9浏览器中需要转码的网页空白出右键鼠标，即可选择&编码&。
傲游浏览器中浏览需要转码的网页时，菜单&查看&--&&编码&即可选择转换编码
谷歌浏览器中浏览需要转码的网页时，点击右上角&三横&图标选择&工具&--&&编码&即可选择切换网页编码达到让浏览器浏览此网页不是乱码。
傲游浏览器切换当前浏览网页编码截图
2、如果自己开发网页，必须网页加入meta charset编码标签。
&http-equiv=&Content-Type&&content=&text/&charset=gb2312&&&
&http-equiv=&Content-Type&&content=&text/&charset=utf-8&&&
假如转换时候，不是记事本编辑添加meta charset编码标签就完成，这样同样会造成乱码，那是因为直接记事本添加或修改编码格式后，而对应Html超文本文档内容并没有随添加或修改编码格式而变化，这个时候需要真正意义上的转码，所以最好借助开发软件进行编码添加与修改。
推荐DW软件中修改编码。在DW软件中进行编码修改或添加，并重新载入编码的网页。
DW转化网页编码类型选项卡截图
扩展相关阅读：
8、如需转载，请注明文章出处和来源网址：我要分享到：上一篇： 下一篇： 必备CSS教程 Essential CSS Tutorials• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • ()• • ()• ()• • • • • • • • • • • • • • • • 必备HTML基础教程 Essential HTML Tutorials •
• () • () • () •
• () •
• () •
• 如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。文章修订日期： 00:30
原创：本文 DIVCSS5版权所有。最新文章NEWS• • • • • • • • • • CSS EFFECTS相关文章RELATED• • • • • • • • • • 热点文章HOT
学习与资源分享平台网页设计教程与开发
提供各种常见网页效果
提供各种各样的设计教程
装扮QQ，让QQ变得更酷
设计参考，提高自升水平
学习服务器和操作系统
提供各种素材和工具
收藏学习资料
您现在的位置：&&>>&&>>&&>>&&>>&正文
网页字体在不同浏览器显示不同结果
网页制作poluoluo文章简介：常用网页字体在不同浏览器中的效果.
网站中常用见的字体就是&宋体&。但现在很多电子商务网站都会有标价，这就涉及到了符号和数字，然后品牌和内容中又会有英文和字母，这就又涉及到英文字体，光用&宋体&会不协调。因为&宋体&本身是为中文字符设计的，符号、数字和英文、字母当然也应该使用英文字体来定义显示才会更合适。前几天做一个项目我们决定使用 font-family:Verdana,Tahoma,Arial,\5b8b\4f53(宋体),sans-serif 的字体显示顺序（先别管合理不合理），我们测试了IE6/IE7/IE8/Firefox/chrome/(使用以上几款浏览器访问我们网站的用户加起来占90%以上)，在IE7/IE8浏览器中显示英文和数字时字体有区别（见下图）
&Aisleep&和&88&感觉上面有明显的锯齿而下面的感觉粗厚平滑一些。大家知道，这是因为IE7/IE8浏览器中[属性] & [高级]选项卡 & [多媒体]有一个ClearType(增强屏幕字体)属性，默认是被选中的原因(见下图)。
如果把这个选项去掉勾，那IE7/IE8浏览器显示的字体就和其它浏览器统一了。反之，通过Windows控制面板 & ClearType Tuning 启用ClearType（见下图）
对于操作系统控制面板没有ClearType Tuning选项的可以通过以下方式实现：1. 单击[开始]，单击[控制面板]，单击[外观和主题]， 然后单击[显示]。2. 在[外观]选项卡上，单击[效果]。3. 单击选中[使用下列方式使屏幕字体的边缘平滑]复选框，然后单击该列表中的 ClearType[清晰]。
那以其它浏览器显示的字体就会和IE7/IE8统一了。(注：据我调查大多数XP操作系统默认为&标准&)接下来会看到一些测试和整理，目的只是为了解字体在不同设置下的特性。这里不会有什么字体的推荐设置，因为我认为字体的设置和你所做项目的具体情况有关，没有什么设置是最好的，只要清楚字体在不同设置下的特性才能在以后的应用中得心应手。测试：12px和14px的字体大小是中文网页中最常见的；字体family：黑体,宋体,sans-serif,Verdana,Tahoma,Arial,Helvetica(没用雅黑字体，雅黑字体在Vista以后的操作系统才有，但根据网站数据统计80%都是XP操作系统，目前兼容性会是个问题)；文字加粗容易分辨区别，浏览器：IE6/IE7/IE8/Firefox3.6/Chrome4.0。下图显示效果不好，这里访问&
整理：从 ClearType角度：除了IE7/IE8外其它浏览器字体显示效果都是一样的，如何统一所有字体显示效果，方法上面已经说过。* 黑体：字体大小12px/14px时 ClearType设置有作用（16px/18px/20px时无作用，22px以上会有作用）；* 宋体（\5b8b\4f53）：字体大小 12px/14px/16px/18px时ClearType设置无作用（20px以上会起作用），所以 12px-18px之间的宋体在所有以上浏览器中能得到高度统一，但粗体的符号显示真的很不理想比如&@&；* sans- serif：无衬线字，细心的一定发现唯独这类字体上图中出现了三种字体。在IE6和IE7/IE8中区别只是ClearType设置问题，字体其实就是Tahoma(无衬字)，但在FireFox和Chrome中调用的是宋体（衬字）（可设置）；* Verdana：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。* Tahoma：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。(仔细观察其实 Verdana和Tahoma字体外形是差不多的，只是单词中字母间距的区别。)关于Verdana和Tahoma再延伸一下，之前看到过根据 Jackob Nielsen用户调研显示，Verdana 字体是易读性最高的，推荐设置为第一默认字体，前提那是英文站点。但在中文站点又要老生长谈中英文排版问题，具体用什么字体要考虑文章中是否有斜体、粗体：o 当ClearType设置为&标准&时，Tahoma比Verdana锯齿感强，而且Verdana字母的间距较宽的优势会体现出来。
o 当ClearType设置为&清晰&时，Verdana和Tahoma效果相近。
至于说Verdana由于字母间距的问题导致中文结合时效果不佳，各位有时间可以看看样稿，对平常的浏览和排版的影响是微乎的（Verdana的字体文章会更长一些），如果我不那么刻意去比，几乎是看不出来的，何况是大多用户（我做过测试把两种字体的文章分开，分别给朋友、同事、家人等不是专业领域的人看，Ta们没有任何意识，并且在我指出字体区别后，他们对我说：&你也太无聊了吧？&）。所以具体用什么字体时，最关键还是考虑字体用在什么对象(系统、访问者)上，然后是字体是否会涉及到的变化：大小、斜体、粗体。* Arial 和Helvetica：以上浏览器中视觉上几乎是一致的（IE7/IE8中感觉上颜色偏深一些），无锯齿感觉，但和Verdana、Tahoma 比起来整体偏小很多。可以把字体设置的大一些，CSS样式中就会多一行特殊的定义。
本文来源：/blog/article.asp?id=337
转载请注明:破洛洛(谢谢合作)
上一篇文章： 下一篇文章：
网友评论：
[][][][][][][][][][]电脑教程子分类为什么我的小米浏览器标志选桌面版不能显示电脑版网页_小米手机4c_MIUI论坛 -
Powered by Discuz! Archiver
风中的泡泡
为什么我的小米浏览器标志选桌面版不能显示电脑版网页
rt，几个都试了试，还是不能看电脑版的网页，顺便吐槽一下自带的小米浏览器放大之后的排班挺恶心的，可以的话给我推荐一个上网速度快体积小的浏览器
风中的泡泡
huazz145 发表于
试了半天发现是无障碍这个选项的问题
查看完整版本:在IE浏览器中正常显示的字体效果设置
当前位置：/
/在IE浏览器中正常显示的字体效果设置
作为网页设计师，在设计网页的时候总是会在字形的选用上犯愁，不同的字型在不同的上会呈现不同的效果，除了一般计算机上的IE浏览器系列：IE6、IE7、IE8和其他的开源Firefox、Chrome以外，还有在移动终端上的字体显示，如Opera mini、safari、UC等。反正可以链接网站的浏览器种类繁多，所以想要所有浏览器都显示相同效果的字体，在字体的选用的时候就不可不慎。
例如，我们使用以下的字体设置（先别管合理不合理）
font-family:Verdana,Tahoma,Arial,5b8b4f53(宋体),sans-serif
让后分别放在、、、、等主流浏览器中测试，发现在IE7和IE8浏览器中显示英文和数字时字体有区别（见下图）
“Aisleep”和“88”感觉上面有明显的锯齿而下面的感觉粗厚平滑一些。
大家知道，这是因为IE7/IE8浏览器中[属性] >
[高级]选项卡 > [多媒体]有一个ClearType(
增强屏幕字体)属性，默认是被选中的原因(见下图)。
如果把这个选项去掉勾，那IE7/IE8浏览器显示的字体就和其它浏览器统一了。反之，通过Windows控制面板
> ClearType Tuning 启用ClearType（见下图）
对于操作系统控制面板没有ClearType
Tuning选项的可以通过以下方式实现：
1. 单击[开始]，单击[控制面板]，单击[外观和主题]， 然后单击[显示]。
在[外观]选项卡上，单击[效果]。
3. 单击选中[使用下列方式使屏幕字体的边缘平滑]复选框，然后单击该列表中的
ClearType[清晰]。
那以其它浏览器显示的字体就会和IE7/IE8统一了。(注：据我调查大多数XP操作系统默认为“标准”)
接下来会看到一些测试和整理，目的只是为了解字体在不同设置下的特性。这里不会有什么字体的推荐设置，因为我认为字体的设置和你所做项目的具体情况有关，没有什么设置是最好的，只要清楚字体在不同设置下的特性才能在以后的应用中得心应手。
测试：12px和14px的字体大小是中文网页中最常见的；字体family：黑体,宋体,sans-serif,Verdana,Tahoma,Arial,Helvetica(没用雅黑字体，雅黑字体在Vista以后的操作系统才有，但根据网站数据统计80%都是XP操作系统，目前兼容性会是个问题)；文字加粗容易分辨区别，浏览器：IE6/IE7/IE8/Firefox3.6/Chrome4.0。
ClearType角度：除了IE7/IE8外其它浏览器字体显示效果都是一样的，如何统一所有字体显示效果，方法上面已经说过。
黑体：字体大小12px/14px时 ClearType设置有作用（16px/18px/20px时无作用，22px以上会有作用）；
宋体（5b8b4f53）：字体大小 12px/14px/16px/18px时ClearType设置无作用（20px以上会起作用），所以
12px-18px之间的宋体在所有以上浏览器中能得到高度统一，但粗体的符号显示真的很不理想比如"@"；
serif：无衬线字，细心的一定发现唯独这类字体上图中出现了三种字体。在IE6和IE7/IE8中区别只是ClearType设置问题，字体其实就是Tahoma(无衬字)，但在FireFox和Chrome中调用的是宋体（衬字）（可设置）；
Verdana：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。
Tahoma：ClearType设置会有作用，IE6/FireFox/Chrome中有明显的锯齿。(仔细观察其实
Verdana和Tahoma字体外形是差不多的，只是单词中字母间距的区别。)关于Verdana和Tahoma再延伸一下，之前看到过根据 Jackob
Nielsen用户调研显示，Verdana
字体是易读性最高的，推荐设置为第一默认字体，前提那是英文站点。但在中文站点又要老生长谈中英文排版问题，具体用什么字体要考虑文章中是否有斜体、粗体：
当ClearType设置为“标准”时，Tahoma比Verdana锯齿感强，而且Verdana字母的间距较宽的优势会体现出来。
当ClearType设置为“清晰”时，Verdana和Tahoma效果相近。
至于说Verdana由于字母间距的问题导致中文结合时效果不佳，对平常的浏览和排版的影响是微乎的（Verdana的字体文章会更长一些），如果我不那么刻意去比，几乎是看不出来的，何况是大多用户（我做过测试把两种字体的文章分开，分别给朋友、同事、家人等不是专业领域的人看，Ta们没有任何意识，并且在我指出字体区别后，他们对我说：“你也太无聊了吧？”）。所以具体用什么字体时，最关键还是考虑字体用在什么对象(系统、访问者)上，然后是字体是否会涉及到的变化：大小、斜体、粗体。
Arial 和Helvetica：以上浏览器中视觉上几乎是一致的（IE7/IE8中感觉上颜色偏深一些），无锯齿感觉，但和Verdana、Tahoma
比起来整体偏小很多。可以把字体设置的大一些，CSS样式中就会多一行特殊的定义。
网络上有人整理相关的字型设定，我把它转给过，给需要的网页设计师参考。
font-family: Arial, Helvetica, sans-
font-family: ‘Arial Black’, Gadget, sans-
font-family: ‘Bookman Old Style’,
font-family: ‘Comic Sans MS’,
font-family: Courier,
font-family: ‘Courier New’, Courier,
font-family: Garamond,
font-family: Georgia,
font-family: Impact, Charcoal, sans-
font-family: ‘Lucida Console’, Monaco,
font-family: ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-
font-family: ‘MS Sans Serif’, Geneva, sans-
font-family: ‘MS Serif’, ‘New York’, sans-
font-family: ‘Palatino Linotype’, ‘Book Antiqua’, Palatino,
font-family: Symbol, sans-
font-family: Tahoma, Geneva, sans-
font-family: ‘Times New Roman’, Times,
font-family: ‘Trebuchet MS’, Helvetica, sans-
font-family: Verdana, Geneva, sans-
font-family: Webdings, sans-
font-family: Wingdings, ‘Zapf Dingbats’, sans-
评论者：iefans
不用浏览器的渲染方式不同，所以在浏览器的中最终看到的效果会有所差异。时间&:& 21:08:58
评论者：新号外
Arial字体，如果加粗，在IE系列浏览器和其他浏览器完全不一致。。。求解决方案！时间&:& 01:18:08
&&&&&&&&&&&&&&&&&&&&}