网页字体设置你了解吗?

article/2025/9/19 19:38:43

转自:http://ued.ctrip.com/blog/?p=3589


以前做项目的时候就依葫芦画瓢的设置 { font-family:arial,”microsoft yahei”,simsun,sans-self; } 等类似的字体,然而当更多的设备和系统出现后,以前这样的设置已不能满足网页在各设备上的显示需求。

就拿最简单的宋体(simsun)来说吧,在Windows系统下显示是一个比较容易阅读的字体,然而在Mac上简直无法直视,如下图给出一个优化前后页面的对比效果:

字体优化前后对比图

因此,出于种种原因,促使我不得不去对字体做一个相应的了解。

对于网站字体设置,本文给出以下意见:

移动端项目:

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,sans-self;

 

pc端(含Mac)项目:

font-family:Tahoma,Arial,”Helvetica Neue“,”Hiragino Sans GB”,Simsun,sans-self;

 

移动和pc端项目:

font-family:Tahoma,Arial,Roboto,”Droid Sans”,”Helvetica Neue”,”Droid Sans Fallback”,”Heiti SC”,”Hiragino Sans GB”,Simsun,sans-self;

 

首先说说字体的种类,字体分为五大种类,然而各设备的支持情况也个不相同,如,

各移动设备系统支持情况:

五大类字体安卓4.0IOS6.0WP8
sans-serif(无衬线)支持支持支持
serif(衬线)支持支持支持
monospace(等宽)支持支持支持
fantasy(梦幻)不支持支持不支持
cuisive(草体)不支持不支持不支持

 

当然目前这只是移动设备各系统的支持情况,然而pc端个浏览器的支持情况也各不相同,如:

五大类字体IE系列ChromeFirefox
sans-serif(无衬线)支持不支持不支持
serif(衬线)支持支持支持
monospace(等宽)支持支持支持
fantasy(梦幻)支持支持支持
cuisive(草体)不支持不支持不支持

 

下面介绍下个系统的默认字体和常用字体:

系统默认西文字体默认中文字体其他常用西文字体其他常用中文字体
Windows宋体宋体Tahoma、Arial、Verdana、Georgia微软雅黑、黑体
Android 4.0以下Droid SansDroid Sans FallbackArial无宋体、无微软雅黑
Android 4.0及以上RobotoRobotoArial无宋体、无微软雅黑
iOSHelvetica NeueHeiti SC (黑体)Tahoma(v7.0)、Arial、Verdana、GeorgiaSTHeiti(v7.0)、无宋体、无微软雅黑
Mac OS X 10.6以下Helvetica NeueSTHeiti (华文黑体)Tahoma、Arial、Verdana、Georgia宋体、无微软雅黑
Mac OS X 10.6及以上Helvetica NeueHiragino Sans GB  (冬青黑体简体中文)Tahoma、Arial、Verdana、Georgia宋体、无微软雅黑

参考资料:iOS6字体列表、iOS7字体列表、Mac OS X  10.6字体列表、Mac OS X 10.7字体列表 等,在看了一些资料之后,对系统和浏览器下的字体就有了一个基本的认识。

有很多同学看到上面这些表格里面的结论,可能就会想到:可以只设置西文字体不设置中文字体。

只设置西文字体不设置中文字体是否可以?答案当然是不可以。因为上面这些系统和浏览器的默认字体也仅仅是是一个理想状态下的设置,这些默认字体仅限于浏览器或系统最初的默认字体。现在的手机都支持字体更换,对于浏览器而已也是如此,现在的浏览器都支持用户自己设置字体。因此,只设置西文字体而忽略中文字体设置是存在一定的危险性的。

 

对于现在Adroid系统的各种字体app,如:字体管家、字体管理等。如果用户自己下载相关的app字体软件将字体改掉,这种情况下,我们该如何处置?

如果用户将默认的系统字替换掉,那我们就只能用其他的中文字体来代替现实,然而就目前而言,移动端的中文字体非常少(几乎是唯一性),因此,本人还没有找到相应的解决办法,后期找到方法再分享出来。



http://chatgpt.dhexx.cn/article/gG53mYb5.shtml

相关文章

mac html字体设置,Mac Win 网页字体显示方案

Mac在诞生的时候就把对字体处理尽可能接近原貌成为它很大的一个卖点,而在这些年亲身使用后,个人感觉Mac下的字体确实看起来比Win下舒服些,特别是在浏览网页时,字体比较“珠圆玉润”,可惜的是Mac目前并不是主流,大多数还是Win用户。所以即使你所使用是Mac,在设计仍然要记…

html设置网页的大小怎么设置方法,网页字体大小怎么样去设置

网页字体大小怎么样去设置 网页字体的大小都是可以自己设置的,你知道吗?下面是百分网小编整理的网页字体大小设置方法,希望对你有帮助。 网页字体大小设置小编推荐方法一 近期,经常有电脑爱好者朋友由于不小心误操作导致电脑浏览网页时出现了字体变大或变小等,导致使用不习…

html网站页面上字体改变,如何设置网页字体样式

CSS布局HTML小编今天和大家分享网页的字体样式,这个只要平时最普通,最常用,最实用的网页字体样式font-family:Microsoft YaHei。 网页字体样式华文黑体:STHeiti 网页字体样式华文楷体:STKaiti 网页字体样式华文宋体:STSong 网页字体样式华文仿宋:STFangsong 网页字体样式…

mac 设置网页字体

参考:  如何设置 font-family 比较好以及字体的中英文名 mac下查看字体英文名称的方法: 1、字体册中选中字体 2、如图:

网页字体设置

本人采取的是懒人建站的方案: pc端: font-family: "Hiragino Sans GB", "Microsoft Yahei", "WenQuanYi Micro Hei", SimSun, Tahoma, Arial, Helvetica, STHeiti; 这些网页字体依次是 “苹果丽黑字体”(这个是苹果系列…

网页字体样式(1)

目录 长度单位 颜色单位 字体样式 字体的分类 长度单位 1:像素 px 像素是屏幕上一个个的小正方形,我们正常看不到的,需要放到最大,才能看到 px是固定的单位,px也是非常常用单位 2:百分比 % 相对于其父元素的宽高比&#xff…

html学习:关于网页字体的设置

转自:微点阅读 https://www.weidianyuedu.com 今天我们来谈谈字体。 ●字体(Font)的设置是网页制作新手遇到的第一个难点。如何控制字体大小,如何取消链接字体的下划线是网友来信问得最多的。好,我们来彻底研究一下字体的各个方面&#xff1a…

免费动态IP代理科普知识课堂—代理服务器的类型

代理服务器的类型 虽然所有代理服务器都为用户提供了使用互联网的备用地址,但也有几种不同的类型——每种都有自己的特点。    正向代理 转发代理位于客户端前面,用于将数据发送给内部网络中的用户组。发送请求时,代理服务器会对其进行检…

JS_控制滚动条左右移动

JavaScript控制滚动条左右移动 <!DECTYPE html> <html> <head> <meta charset‘utf-8’> <title>onwheel-test</title> </head> <body> <div idout stylewidth:500px;height:500px;overflow:auto> <d…

js做坦克移动

今天做一个js坦克移动的demo 首先在image文件夹中放入以下五张图片素材 创建html文件 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta http-equiv"X-UA-Compatible" content"IEedge"…

js鼠标拖动元素移动

拖动元素移动 var odiv document.getElementsByTagName(div)[0];//给需要移动的元素添加onmousedown事件odiv.onmousedown function (ev) {var event window.event || ev;// 获取屏幕中可视化的宽高的坐标var dx event.clientX - odiv.offsetLeft; var dy event.clientY -…

js复习:移动元素offsetLeft,offsetTop,10%,30%, left

移动元素 1.我们怎么移动元素&#xff1f;加一个li:让它相对于div偏移&#xff1a;加定位效果图&#xff1a;第二种方法&#xff1a;移动元素效果图&#xff1a; 1.我们怎么移动元素&#xff1f; 1.给元素绝对定位&#xff0c;或相对定位 &#xff0c; position: relative; 有…

JavaScript图片跟随鼠标移动

把小电视图片img标签里面。 因为这关于js移动所以要给img设置一个定位。 这里我们没有给img标签设置到id&#xff0c;用一个新方法querySelector获取指定标签。 下面就是给img绑定鼠标移动事件&#xff0c;声明和获取到水平坐标和垂直坐标的属性。 、 然后再调用到img标签改变…

js实现div移动

之后想做一个可以展示数据存储位置变化的示意图&#xff0c;前期先做简单的两列互换。 首先先把格子画出来&#xff0c;因为想做列的移动&#xff0c;所以一列是一个div。 HTML&#xff1a; <div class"box"><div id"box1"><div class&quo…

Javascript 移动的海绵宝宝

效果描述&#xff1a; 做一个简单的动画效果&#xff0c;刚刷新页面时&#xff0c;SpongeBob在页面的左上角位置&#xff0c;随着时间推移&#xff0c;他匀速向右移动&#xff0c;直到右侧抵达页面右侧停下来。 分析&#xff1a; SpongeBob作为一张图片被存放在<img>里…

JavaScript按键使盒子移动

设置一个box样式&#xff1a; #box{position: absolute;top: 200px;left: 200px;width: 100px;height: 100px;background-color: orange; }对onkeydown事件设置监听&#xff0c;根据按下的方向键改变CSS样式&#xff1a; document.onkeydownfunction(e){switch(e.keyCode){cas…

JavaScript 实现简单的移动和缓动的效果

目录 一、HTML布局 二、CSS布局 三、JavaScript代码——移动 四、JavaScript代码——缓动 五、完整代码 一、HTML布局 简单定义两个盒子&#xff0c;一个做移动效果、一个做缓动效果。 <div class"box box1"></div><div class"box box2&quo…

js实现鼠标移动

要求&#xff1a; 鼠标移入美女图片&#xff0c;出现半透明正方块鼠标移出美女图片&#xff0c;隐藏半透明正方块鼠标在美女图片区域移动&#xff0c;半透明正方块随着移动半透明正方块移动到美女图片四边界时&#xff0c;停止移动点击下面小图切换大图 html结构部分 <!D…

js实现图片移动

图片在指定范围内移动 图片在指定范围内移动&#xff0c;配上合适和图片和背景&#xff0c;就可以完成好看的动态页面。 其实就是一张猫行走的动图&#xff0c;再配上黄色的背景色。 <body style"background-color:rgba(255,216,0,1.00)"> //背景颜色<im…

JavaScript移动显示

JavaScript移动显示 1.首先创建好 html 的格式&#xff0c;然后&#xff01;Tab&#xff1b;我们要实现鼠标在div标签中移动时&#xff0c;下面的p标签实时显示鼠标在div的位置&#xff0c;首先要在body里创建div标签和p标签&#xff0c;分别给它们设置id名&#xff0c;如下图&…