网页字体设置你了解吗?

以前做项目的时候就依葫芦画瓢的设置 { 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字体软件将字体改掉,这种情况下,我们该如何处置?

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

本文作者:破男孩 转载请注明来自:携程UED

转载于:https://www.cnblogs.com/sunshq/p/3948969.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/401547.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

SpringMVC redirect中文乱码问题

在使用"redirect:xxx.do?param中文"时会出现乱码问题,解决方案如下: 使用model.addAttribute来替代直接拼接参数。如下: RequestMapping("t") public String t(String param, Model model) {model.addAttribute("p…

设计模式笔记(7)---适配器模式(结构型)

Gof定义 将一个类的接口转换成客户所希望的另一个接口。适配器模式使得原本由于接口不兼容而不能一起工作的那些类可以一起工作。 动机 在软件系统中,由于应用环境的变化,常常要将“一些现存的对象”放在心的环境中应用,但是新环境要求的接口…

js RegExp正则表达式常见用例

js RegExp正则表达式常见用例判断输入是否为数字、字母、下划线组成判断字符串是否全部为字母判断字符串是否全部为数字判断是否带有小数判断是否中文名称组成判断手机号判断身份证判断验证码判断邮件地址是否合法判断是否是emoji表情获取字符长度,中文算2&#xff…

软件设计模式之适配器模式(JAVA)

什么是适配器模式? 在计算机编程中,适配器模式(有时候也称包装样式或者包装)将一个类的接口适配成用户所期待的。适配器能将因为接口不兼容而不能在一起工作的类工作在一起,做法是将类自己的接口包裹在一个已存在的类中…

表达式与运算符

表达式与运算符 表达式 与数学中的定义相似,表达式是指具有一定的值的、用运算符把常数和变量连接起来的代数式。一个表达式可以只包含一个常数或一个变量。运算符可以是四则运算符、关系运算符、位运算符、逻辑运算符、复合运算符。下表将这些运算符从高优先级到低…

Javascript 调试技巧

Javascript 调试技巧 在代码中寻找错误 1)alert 方法: 弹框提示 2)console 方法 在调试窗口上打印 JavaScript 值 3)断点调试 在浏览器开发者工具中为JS代码添加断点,让JS执行到某一特定位置停住,方便…

[POJ2157]Maze(DFS)

题目链接:http://poj.org/problem?id2157 题意:给一张地图,地图里有门和钥匙,想要开门必须集齐所有钥匙。给定起点和终点,问从起点出发能否到达终点。 爆搜floodfill,每填一次考虑是否到达终点&#xff0c…

WPF程序将DLL嵌入到EXE的两种方法

2019独角兽企业重金招聘Python工程师标准>>> WPF程序将DLL嵌入到EXE的两种方法 这一篇可以看作是《Visual Studio 版本转换工具WPF版开源了》的续,关于《Visual Studio 版本转换工具WPF版开源了》可以参看地下地址(两篇是一样的)&…

华中地区高校第七届ACM程序设计大赛——之字形矩阵【2012年5月27日】

题意&#xff1a;输入a b Right 或 a b Down ,根据输入输出之字形路径的矩阵。 1 #include <stdio.h>2 int xx[4]{0,1,-1,1},yy[4]{1,0,1,-1};3 int map[100][100],col,row,x,y,dir,steps,idx;4 char sel[10];5 void nextdir()6 {7 switch(dir)8 {9 case 0: …

Javascript 常见使用误区

Javascript常见使用误区 1&#xff09;比较运算符&#xff1a; var x 0; if (x 10) // true if (x 0) // falsevar x 10; var y "10"; if (x y) // true if (x y) // false 恒等计算符&#xff0c;同时检查表达式的值与类型var x 10; switch(x) { //执行ca…

内存泄漏和内存溢出的优化

内存泄漏&#xff1a; 对象在内存heap堆中中分配的空间&#xff0c; 当不再使用或没有引用指向的情况下&#xff0c; 仍不能被GC正常回收的情况。 多数出现在不合理的编码情况下&#xff0c; 比如在Activity中注册了一个广播接收器&#xff0c; 但是在页面关闭的时候进行unRegi…

使用ftp搭建yum源问题解决

wget 无法连接的情况 关闭linux 防火墙 1) 重启后生效 开启&#xff1a; chkconfig iptables on 关闭&#xff1a; chkconfig iptables off 2) 即时生效&#xff0c;重启后失效 开启&#xff1a; service iptables start 关闭&#xff1a; service iptables stop 需要说明的是对…

oracle文件

1、控制文件和日志文件 控制文件&#xff08;Control File&#xff09;是一个很小的二进制文件&#xff0c;用于描述和维护数据库的物理结构。在Oracle数据库中&#xff0c;控制文件相当重要&#xff0c;它存放有数据库中数据文件和日志文件的信息。Oracle数据库在启动时需要访…

Javascript this关键字 指向详解

Javascript this关键字 指向详解 面向对象语言中 this 表示当前对象的一个引用。在 JavaScript 中 this 不是固定不变的&#xff0c;它会随着执行环境的改变而改变。 1&#xff09; 单独使用&#xff0c;this 表示全局对象。 <script type"text/javascript">…

storyboard隐藏iphone软键盘

xcode 4.3.2 storyboard ** 点击软键盘的return键隐藏软键盘 .h文件定义IBAction -(IBAction)textFieldReturn:(id)sender; .m文件实现 -(IBAction)textFieldReturn:(id)sender{[sender resignFirstResponder];//关键代码 } storyboard中&#xff0c;选中文本框&#xff0c;查…

常用命令-tar 加密

2019独角兽企业重金招聘Python工程师标准>>> 在当前目录下有一个pma目录的文件夹: 1、使用tar对文件压缩加密&#xff1a; # tar -zcvf - pma|openssl des3 -salt -k password | dd ofpma.des3 完成将得到一个pma.des3的打包文件&#xff0c;用你设置的密码替换pas…

ORM SQLAlchemy 简介

对象关系映射&#xff08;Object Relational Mapping&#xff0c;简称ORM使用DB-API访问数据库&#xff0c;需要懂 SQL 语言&#xff0c;能够写 SQL 语句&#xff0c;如果不想懂 SQL&#xff0c;又想使用关系型数据库&#xff0c;可以使用 ORM,一个 ORM , 它的一端连着 Databas…

Javascript let和const

Javascript let和const 在 ES6 之前&#xff0c;JavaScript 只有两种作用域&#xff1a; 全局变量 &#xff1a; 在函数外声明的变量作用域是全局的 局部变量&#xff08;函数变量&#xff09;&#xff1a;在函数内声明的变量作用域是局部的 <script type"text/jav…

Javascript JSON格式

Javascript JSON格式 1&#xff09;什么是JSON&#xff08;JavaScript Object Notation&#xff09;&#xff1f; 是一种轻量级的数据交换格式 是独立的语言 2&#xff09;JSON 语法规则 数据为 键/值 对 数据由逗号分隔 大括号保存对象 方括号保存数组 JSON 对象&#xff…

转:OAUTH协议简介

OAUTH协议简介 原文链接 摘要&#xff1a;OAUTH协议为用户资源的授权提供了一个安全的、开放而又简易的标准。与以往的授权方式不同之处是OAUTH的授权不会使第 三方触及到用户的帐号信息&#xff08;如用户名与密码&#xff09;&#xff0c;即第三方无需使用用户的用户名与密…