`

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属性.pptx

    本文将详细讲解几个与字体相关的CSS属性,包括`font-size`、`font-family`、`font-weight`、`font-style`以及`word-wrap`,并介绍一种新增的字体使用方法——`@font-face`规则。 首先,`font-size`属性用于设定文本...

    css中默认中文字体font-family列表

    当中文字体被指定在font-family属性中时,这个列表就变得尤为重要,因为中文字体的种类繁多,且并不是所有的中文字体都能在所有用户的系统上找到。 对于中文字体而言,常见的CSS默认中文字体包括如下几种,这些字体...

    Css样式 -实例练习

    在这个实例中,我们将为网页中的表格内文本设置特定的样式:颜色为红色,字体为黑体,大小为24px,行高为50像素,并添加删除线。 **步骤1:添加表格文本样式** 1. 在`wz1.css`中添加: ```css table td { color:...

    css解决font-weight:blod跳动问题的解决

    当我们将`font-weight`设置为`bold`时,浏览器会尝试找到一个比当前字体更粗的样式,如果找不到,可能会选择一个接近的字体,这可能导致字体大小的微小变化,进而引起元素尺寸的变化。 在上述问题中,实现方式1直接...

    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('../...

    icon通过@font-face实现

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

    font-family中文字体代码示例

    在实际开发中,为了保持页面的一致性,开发者通常会创建一个全局的CSS样式表,将字体设置作为一部分基础样式,而不是在每个元素上单独设置。这样可以提高代码的可维护性和可读性。 总结来说,`font-family`属性在...

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

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

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

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

    html5自定义字体@font-face

    - `font-weight` 和 `font-style`: 可以用于指定字体的粗细(如 bold)和样式(如 italic),与常规CSS属性一样。 为了确保跨浏览器兼容性,通常需要提供多种字体格式,因为不同的浏览器支持的格式可能不同。例如:...

    百度新闻调用

    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美化网页文字1.pdf

    本文将深入讲解如何使用CSS来美化网页中的文字,主要涵盖字体设置和字号调整两个方面。 首先,我们来看如何设置文字的字体。CSS中的`font-family`属性用于定义文字的字体类型。例如,如果你想让文字显示为黑体,...

    利用js和css创建日历控件

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

    CSS设置文字、图像与背景图像样式.doc

    在 CSS 中,可以使用 font-family、font-size、font-style、font-weight 等属性来设置文字的样式。例如,设置标题的样式为黑体、居中、文字颜色为白色、背景颜色为绿色: `h1 { font-family:黑体; text-align:...

Global site tag (gtag.js) - Google Analytics