`

css设置中文字体(font-family:"黑体")后样式失效问题

阅读更多

做项目时偶遇的一诡异问题,同样的代码,在ff和IE7以上页面显示正常,但IE6无论怎么改都不起作用,本来以为是IE6的某些浮动bug所致,结果弄了很长时间也不行,后来不经意间把原来设定的font-family: "黑体"属性去掉了,一切恢复正常。。。
到网上搜了下,还真有不少人遇到同样的问题,下面摘录一段:

css文件里font-family: "黑体";这句会导致后面的css定义全部不起作用了。
只要把font-family: "黑体";
改成
font-family:黑体;
就行了,去掉空格和双引号。
这个问题只存在于IE6中。

在其它网站找到的部分答案:

http://www.im87.cn/blog/10-03/cssshe-zhi-zhong-wen-zi-ti-font-familyhei-ti-hou-yang-shi-shi-xiao-wen-ti

一处容器的font-family属性里写了"宋体",而IE6一下不解析"" 号,于是就导致整个页面的居中失效
css 中指定font-family属性为黑体、幼圆、微软雅黑等,一一无法正常显示(ie7),最终发现原来是CSS文件是gb2312编码,另存为UTF- 8后改掉乱码的中文,之后font-family指定中文字体便ok 了~这样看浏览器ms是按utf8对css文件进行解析的
====================================
另,考虑到文件编码问题,在css中推荐使用中文字体的英文表示法,以下附常见中文字体的英文名:
Mac OS的一些:
华文细黑:STHeiti Light [STXihei]
华文黑体:STHeiti
华文楷体:STKaiti
华文宋体:STSong
华文仿宋:STFangsong
儷黑 Pro:LiHei Pro Medium
儷宋 Pro:LiSong Pro Light
標楷體:BiauKai
蘋果儷中黑:Apple LiGothic Medium
蘋果儷細宋:Apple LiSung Light
Windows的一些:
新細明體:PMingLiU
細明體:MingLiU
標楷體:DFKai-SB
黑体:SimHei
宋体:SimSun
新宋体:NSimSun
仿宋:FangSong
楷体:KaiTi
仿宋_GB2312:FangSong_GB2312
楷体_GB2312:KaiTi_GB2312
微軟正黑體:Microsoft JhengHei
微软雅黑体:Microsoft YaHei
装Office会生出来的一些:
隶书:LiSu
幼圆:YouYuan
华文细黑:STXihei
华文楷体:STKaiti
华文宋体:STSong
华文中宋:STZhongsong
华文仿宋:STFangsong
方正舒体:FZShuTi
方正姚体:FZYaoti
华文彩云:STCaiyun
华文琥珀:STHupo
华文隶书:STLiti
华文行楷:STXingkai
华文新魏:STXinwei
出自:

分享到:
评论

相关推荐

    postcss-minify-font-values:使用PostCSS缩小字体声明

    postcss-minify-font-values 使用PostCSS缩小字体声明。 该模块将尝试最小化font-family , font-weight和font速记属性; 它可以在必要时取消对字体系列的引用,检测并删除重复项,并在找到关键字后缩短声明。 ...

    CSS属性速查表.pdf

    font-weight:关键字|数值设置文本字体粗细 normal:正常 bold:粗体 bolder:特粗 lighter:细体 font:font-family font-style font-variant font-weight font-size 一次设置字型、斜体、 小型大写字母、粗细及...

    CSS3 @font-face网页中的字体

    定义好`@font-face`后,就可以在CSS中像使用其他系统字体一样使用自定义字体了: ```css body { font-family: 'MyWebFont', sans-serif; } ``` 这段代码会让网页的文本使用"MyWebFont"字体,如果浏览器不支持或...

    postcss-font-family-system-ui:PostCSS插件来转换W3C CSS字体系列

    postcss-font-family-system-ui 允许您遵循规范在CSS中使用system-ui 。 body { font : 100 % / 1.5 system-ui;}/* becomes */body { font : 100 % / 1.5 system-ui , -apple-system , Segoe UI , Roboto , Noto ...

    font-size:100%的目的和作用是什么

    看到一些css重设,请问设置font-size:100%的目的和作用是什么? ————————————————————————————— 假如你设置body{font-size:12px;} 但h1是不会继承这个12px,它会按照一定百分比增加...

    glyphicons-halflings-regular.zip

    bootstrap 图标显示需要的5个字体文件glyphicons-halflings-regular @font-face { font-family: 'Glyphicons Halflings'; src: url('../common/css/fonts/glyphicons-halflings-regular.eot'); src: url('../...

    支持.net 心语聊天室系统

    支持.net 心语聊天室系统<style type="text/css"> .headerBg { cursor: hand; text-align: center; width: 160px; color: #000000; font-family: 宋体; font-size: 10px; font-weight: bold; background-...

    icon通过@font-face实现

    为了解决这些问题,现代网页设计中常常采用`@font-face`规则来实现图标,这种方法被称为图标字体或者符号字体。本篇文章将详细讲解如何通过`@font-face`和CSS3技术来实现icon图标。 `@font-face`是CSS3中引入的一个...

    css3 @font-face 非系统字体添加

    在CSS3中,`@font-face`规则是一个强大的特性,允许开发者引入非系统字体到网页设计中,从而提供更丰富的视觉体验。这个功能打破了浏览器对系统内置字体的依赖,使得设计师能够灵活地使用各种定制字体,提升网站的...

    如何用css设置网页字体

    在深入探讨具体的字体设置之前,了解CSS的基本语法是非常重要的。CSS的语法结构如下: ```css 选择器 { 属性: 值; 属性: 值; ... } ``` 其中,**选择器**用于指定要应用样式的HTML元素,而**属性**及其对应的**值*...

    解决在vue项目中webpack打包后字体不生效的问题

    最近在项目开发过程中遇到如下问题:开发环境中设置的字体样式使用webpack打包后到生产环境不生效。如图: 打开控制台查看元素样式,发现在开发环境的时候”微软雅黑”被解析成unicode编码并且带着双引号, 但使用...

    simple-line-icons:简单和最小线条图标

    具有CSS,SASS,LESS和Web字体文件的简单线条图标。 预览和文件 您可以在找到完整图标集的备忘单 安装 通过 npm install simple-line-icons --save 通过 bower install simple-line-icons --save 通过 另外,您...

    第五章CSS3美化网页元素.md

    ### 字体类型 - `font-family` 属性 - **含义:** 设置元素的字体系列。 - **举例:** ```css p { font-family: Verdana, "楷体"; } body { font-family: Times, "Times New Roman", "楷体"; } ``` ### ...

    百度新闻调用

    font-family:arial}.baidu{font- size:14px;line-height:24px;font-family:arial} a,a:link{color:#0000cc;} .baidu span{color:#6f6f6f;font-size:12px} a.more{color:#008000;}a.blk {color:#000;font-weight:...

    CSS font-family为英文和中文字体分别设置不同的字体

    在CSS中,`font-family` 属性用于定义元素的字体系列,它允许我们指定一系列的字体,以便在用户的计算机上找不到首选字体时,浏览器可以尝试使用下一个可用的字体。这是一项重要的样式设置,确保文本在各种设备和...

    常用CSS

    `font-family` 指定了字体家族,`font-size` 设置了字体大小,`color` 设定了文本颜色,而 `border` 属性用于设置边框,这里的边框颜色和宽度都有所指定。`background-image` 属性引入了一个背景图像,`background-...

    基于ASP的留言板设计代码

    <style type="text/css"> A:link,A:active,A:visited{TEXT-DECORATION:none ;Color:#3C2F1D} A:hover{TEXT-DECORATION: underline;Color:#4455aa} BODY{ FONT-SIZE: 12px; COLOR: #000000; FONT-FAMILY: 宋体; ...

    font-spider-plus:font-spider-plus(字蛛+)是一个智能 WebFont 压缩工具,它能自动分析出本地页面和线上页面使用的 WebFont 并进行按需压缩

    字蛛+(Font-spider-Plus) font-spider-plus(字蛛+)是一个智能 WebFont 压缩工具,它能自动分析出本地页面和线上页面使用的 WebFont 并... font-family: 'source'; src: url('../font/source.eot'); src: url('.

    利用js和css创建日历控件

    ### 使用CSS和JavaScript创建日历控件的知识点详解 #### 一、项目概述 本项目旨在通过CSS和JavaScript实现一个可交互的日历控件。该控件不仅具有良好的视觉效果,还能让用户方便地选择日期,并在选中日期时提供反馈...

    CSS常用样式表快速查询

    CSS中文本属性可以控制文本的字体、样式、颜色、对齐方式等。常见的文本属性包括: * font-size:设置文本的字体大小 * font-style:设置文本的字体样式 * font-family:设置文本字体类型 * color:设置文本的颜色 ...

Global site tag (gtag.js) - Google Analytics