IPhone 部分CSS刷新页面后字体样式失效效

来源：蜘蛛抓取(WebSpider) 时间：2018-09-08 06:31 标签： 刷新页面后字体样式失效

html乱码原因与网页乱码解决方法，浏览器浏览网页内容出现乱码符合解决篇（）

造成网页乱码原因主要是内中文字内容与html编码不同造成。但无论是哪种情况造成乱码在网页开始时候都需要设置网页编码。


html网页乱码效果截图

1、比如是gbk的编码，而内容中的中文字是utf-8编码的，这样浏览器打开即会出现html乱码。反之网页是编码utf-8，内容是gbk也会出现乱码。

2、html网页编码是gbk，而程序从数据库中调出呈现是utf-8编码的内容也会造成编码乱码。

3、浏览器不能自动检测网页编码，造成网页乱码。

第一种，html网页源代码编码与中文字输入编码不同。

使用软件进行编辑HTML网页内容，推荐使用进行编辑和开发。

尽量不要直接使用记事本进行编辑HTML代码。

第二种，如果网页设置编码是gbk的，而数据库储存数据编码格式是UTF-8的，这个时候程序查询数据库数据显示数据前进乡程序转码即可。

在写数据库连接文件时，写成：

然后在做页面时，注意这句：

这样不管输入数据库的中文，还是页面显示，就都正常了。
在DW CS4版里，默认生成的也是utf8页面。

同样的，如果一开始写数据库连接文件时写成：

其它asp程序或其它程序语言网站根据实际情况到百度查询转换编码方法。

第三种，浏览器造成乱码。
这个可能是你网页没有设置meta charset编码造成。导致浏览器不能识别你网页默认编码类型。解决方法：

1、如果浏览器浏览时候出现网页乱码，在浏览器中找到转换编码的菜单。

在IE9浏览器中需要转码的网页空白出右键鼠标，即可选择“编码”。
傲游浏览器中浏览需要转码的网页时，菜单“查看”-->“编码”即可选择转换编码
谷歌浏览器中浏览需要转码的网页时，点击右上角“三横”图标选择“工具”-->“编码”即可选择切换网页编码达到让浏览器浏览此网页不是乱码。


傲游浏览器切换当前浏览网页编码截图

2、如果自己开发网页，必须网页加入meta charset编码标签。

假如转换时候，不是记事本编辑添加meta charset编码标签就完成，这样同样会造成乱码，那是因为直接记事本添加或修改编码格式后，而对应Html超文本文档内容并没有随添加或修改编码格式而变化，这个时候需要真正意义上的转码，所以最好借助开发软件进行编码添加与修改。

推荐DW软件中修改编码。在DW软件中进行编码修改或添加，并重新载入编码的网页。


DW转化网页编码类型选项卡截图

如需转载，请注明文章出处和来源网址：

如对文章有任何疑问请提交到，或有任何网页制作CSS问题立即到发贴求解 或 直接DIVCSS5网页顶部搜索遇到DIVCSS疑问。
文章修订日期： 00:30 原创：

年末了，任务比较少，经理看我闲着，是不是感觉很不自在啊。遂给我一个任务：调研一下ios和android设备所支持各种浏览器支持的字体。一听“调研”俩字，我就头大了，我一个小程序员，又不是搞产品的哪干过这样的活。好吧，按自己理解的意思来吧。

别看自己一直搞前端，其实连最基础的字体种类都不知道。研究了一天就发现自己知识开阔了不少。忘了是哪位名人说过一句话了：在一个领域，不管是多么渺小的事，你坚持10年，你就会成为这方面的专家。不废话了，现在把自己了解的关于web字体方面的信息分享给大家。

1、在Web编码中，CSS默认应用的Web字体是有限的，虽然在新版本的CSS3，我们可以通过新增的@font-face属性来引入特殊的浏览器加载字体。

浏览器中展示网页文字内容时，文字字体都会按照设计师在css中定义的字体族的顺序来进行显示。什么是字体族？字体族就是你在css代码中看到“font-family”的代码内的一类字体名称，例如下面这行代码：

按照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 字体在浏览器中不常用，在各个浏览器中有明显的差异。

Helvetica: 被评为设计师最爱的字体，Realist风格，简洁现代的线条，非常受到追捧。在Mac下面被认为是最佳的网页字体，在Windows下由于Hinting的原因显示很糟糕。
Arial: Helvetica的「克隆」，和Helvetica非常像，细节上比如R和G有小小差别。如果字号太小，文字太多，看起来会有些累眼。Win和Mac显示都正常
Verdana: 专门为了屏显而设计的字体，humanist风格，在小字号下仍可以清楚显示，但是字体细节缺失严重，最好别做标题。
Trebuchet MS: 为微软设计的一个humanist风格字体，个人觉得个性太过突出，用得不好会不搭。

Georgia: 基本上适合正文屏显的衬线字体，非Georgia莫属了。笔画粗重，衬线明线，轮廓较大，小字体显示也很清晰，同时细节还算OK。
Times: Times是为了报纸而设计的，特点是可以在有限的空间塞进去更多的文字，笔画较弱，小字号正文屏显看起来累眼。曾经Engadget改版的时候用了Times作为正文，被骂得很惨之后换成了Georgia。

宋体：Win最常见的字体，小字体点阵，大字体TrueType，但是大字体并不好看，所以最好别做标题。
微软雅黑：Vista之后新引入的字体，打开Cleartype之后显示效果不错，不开Cleartype发虚。
华文细黑：Mac下的默认中文。

4、写个小demo，在各种浏览上测试了一下，各种浏览器对这个字体的解析还是有差异的。

5、在此次测试中发现：

android设备中各个浏览器都很不给力（ios的还没有测试，我想肯定也好不到哪去吧），android手机中各个浏览器支持的常用字体只有三种：

移动设备的浏览器还需要努力哦。

我要回帖

更多关于 刷新页面后字体样式失效 的文章

 

随机推荐