web开发之字体应用
font-family,这是一个很容易被忽视的环节,却直接影响了网站的体验。
本文不谈技术细节,只说设计准则。
1.使用英文名
尽量不要使用下面的声明方式:
font-family: "华文细黑", "微软雅黑";
直接用中文名有可能会出现支持性问题,在编辑器之间切换还有可能乱码。中文字体其实也是有英文名的,华文细黑叫STXihei,微软雅黑叫"Microsoft YaHei",宋体叫Simsun,下面这段声明与上面那段效果是相同的:
font-family: STXihei, "Micorosoft YaHei";
下面是一份中英文字体对应表:
2.正确声明字体顺序
先英文,再中文(如果可以尽量用英文名代替),最后加上字体族。
font-family: STXihei, "Micorosoft YaHei", sans-serif;
为什么英文要在前面,因为很多中文字体的英文显示都很丑。如果你不能确定用户的电脑上一定会有你声明的字体的话,那最好在后面加上字体族,以便于系统寻找替代方案。
另外Mac中的字体声明要放在Window前面。因为Window下面是没有Mac的华文细黑的,而Mac用户有可能安装了微软的Office。所以把Mac放前面不会对windows用户产生影响。
3.正确选择字体族
4.注重兼容性
font-family:Arial, STXihei, "Microsoft YaHei", SimSun, sans-serif;
iOS 系统
默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue
android 系统
默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans
winphone 系统
默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
(没有微软雅黑!)
5.使用自定义字体
web开发之字体应用相关推荐
- jsp快到截止日期字体颜色变色_jsp页面中字体变色问题 - Java / Web 开发
jsp页面中字体变色问题 - Java / Web 开发 [@title] function diyCheck(){ var fm = document.frmMain; s1=fm.YEAR.val ...
- 移动web开发,day1,字体标签、平面位移、渐变总结
移动web开发 第一天内容分为三大块:字体标签iconfont, 平面转换 渐变background-image:linear-gradient 字体图标: 字体图标iconfont(必须在html里 ...
- css 所有字体大小,前端Web开发人员的CSS相对字体大小
在本文中,我们将看几种不同的方式,前端Web开发人员可以使用CSS操作其网页的字体. 网页设计中最大的混乱之一是由font-size属性造成的. 在CSS中,可以使用多个单元,这只会导致设计人员额外头 ...
- 移动web开发(三)——字体使用
参考: 移动web页面使用字体的思考.http://www.cnblogs.com/PeunZhang/p/3592096.html
- java web开发初学_2018年学习Web开发的绝对初学者指南
java web开发初学 This post was originally published on Coder-Coder.com. 该帖子最初发布在Coder-Coder.com上 . If yo ...
- Chrome web 开发用到的插件
个人博客:付博瀚的个人博客 现在设我是一位web开发人员,以Chrome为阵地.下面是一些能让我少花点时间的工具: WhatFont -- 名字就说明了一切.这是找出你最喜欢网站使用的字体的简单方法, ...
- 移动 Web 开发技巧
最近一直有人问,移动端的页面怎么写啊?要注意什么啊?和PC页面有什么区别?-- 就会有很多的疑问.其实要我回答这些问题可能也不知道怎么回答小伙伴.我也没有专门学习过移动端的制作,大部分都是工作后慢慢 ...
- Web开发常规调试方法与常见问题分析
一.Web项目基本原理 现在的web项目大都已经前后端独立开发与部署. 前后端独立开发,一般是前端与后端通过web接口(常见的有RESTful与websocket)文档进行交流.前端开发人员先更具业务 ...
- 静态Web开发 JQuery
静态Web开发 JQuery 伍章 JQuery 1节 介绍JQuery和顶级对象 <<锋利的JQuery>> JQuery官网: http://jquery.com (下载j ...
最新文章
- reactnative 获取定位_react native 获取地理位置的方法示例
- ThinkPHP分页实例
- 直播 NO.5 | Facebook 田渊栋:用深度(强化)学习为组合优化寻找更好的启发式搜索策略...
- SQL Server XML转Table
- python构建知识库_使用Mediawiki构建个人知识库
- Call to localhost/127.0.0.1:9000 failed on connection exception:java.net.ConnectException的解决方案
- 工作手册 教育教学总结与研究工作规范 1.总则 教育教学 总结和教育教学研究工作是发现问题、总结经验、不断提高教育教学质量的重要措施。为保障教育教学总结和教育教学研究工作
- Sequential Model - 序列模型(RNN循环神经网络)
- java+redis实现腾讯云短信SDK3.0验证+过期时间验证
- C# 判别系统版本以及Win10的识别办法
- ipython的安装和使用过程_数据分析之一:IPython安装及使用
- 研究生学习生活日记——新生见面第一次组会
- 才在enom注册了10多个域名,就有人想盗我邮箱
- golang学习(二)—— 变量
- 记一次导入环信聊天demo的过程
- Sigmastar 方案的相机开发流程和注意点
- 开源神器:让你一键卸载 Windows 默认程序!
- 市场调研报告-全球与中国熔接器市场现状及未来发展趋势
- 分布式系统为什么需要 Tracing?
- 数据库设计之物理结构设计
热门文章
- QCalendarWidget实现某个区间时间凸出显示
- 用python计算工资工资_python小编程------交互界面计算工资(五险一金不按比例缴纳)...
- php abbyy,ABBYY FineReader 14(OCR文字识别软件) v14.0.101.665 官方试用版
- cpu-z设置中文教程
- Django模型系统的常用字段和字段参数
- SOCKET通信中TCP数据包大小的确定
- 一款神奇的国产便携式扩音器
- FPGA学习日记(九)ZYNQ的GPIO—MIO接口控制
- sql文字转换全拼_获取汉字全拼SQL函数
- DEH系统服务器,东汽DEH服务器配置