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.正确选择字体族

我们在CSS中会经常使用sans-serif,但你确定用它合适吗?
CSS中的字体可分为两大类: sans-serif(非衬线字体族,sans是法语前缀,代表无的意思。)和 serif(衬线字体族)。二者的主要区别是一个没有修饰,一个有修饰。

可以看到sans-serif笔画都比较平整,粗细均匀,而serif在笔画的开始和末尾都会有一点修饰。因此,serif的字体容易辨认一些,阅读的整体感要比sans-serif强。而sans-serif则强调文字个体,通常用来做标题会更加醒目一些。
一般来说,文章的正文用serif可增加易读性。海报,网页标题等部分用sans-serif更佳。有时为了美感小段部分也会用sans-serif,但是涉及到大篇幅的时候,还是要用serif的。
除了上面两种字体外,还有以下几种:
Monospace:等宽字体族。适合显示代码,代表字体有Courier、MS Courier New、Prestige等;
cursive:手写字体族。在书信风格的网页下用的比较多,代表字体有Caflisch Script、Adobe Poetica等;
fantasy:梦幻字体族。听名字就是很有艺术范的字体,代表字体有WingDings、WingDings 2、WingDings 3、Symbol等。

实际设计网页时,要根据需求的不同合适选择字体族,而不是直接复制粘贴。


4.注重兼容性

Windows,Mac OS,Linux,不同的系统预装字体是不同的,要考虑到各个系统的显示效果,尽量做到一致性体验。
而且,同一类操作系统的不同版本字体库也可能有差别。比如XP下面是没有预装微软雅黑的,所以我们还要向下兼容:
font-family:Arial, STXihei, "Microsoft YaHei", SimSun, sans-serif;
不过在XP下面,如果不指定网页的中文字体,默认就是用宋体,所以上面的SimSun在XP下其实是多余的。

以上只是考虑PC环境下的兼容,还有移动端的兼容性。苹果专门放了一个 iOS 7字体支持列表,网上找了一份主流手机默认字体表:

iOS 系统

默认中文字体是Heiti SC
默认英文字体是Helvetica
默认数字字体是HelveticaNeue

android 系统

默认中文字体是Droidsansfallback
默认英文和数字字体是Droid Sans

winphone 系统

默认中文字体是Dengxian(方正等线体)
默认英文和数字字体是Segoe
(没有微软雅黑!)

5.使用自定义字体

如果真要做的一致性体验的 话,那么使用自定义字体倒是最好的选择。有了font-face,就不必要局限在安全字体里了。但是仍然需要考虑到浏览器的兼容性。
主流浏览器都支持.ttf/.otf后缀字体,IE9+只支持.eot的字体(IE8以下不支持font-face)。

另外如果是在移动设备上,个人认为是否使用自定义字体就要慎重考虑了,一是流量问题,二是移动端各个系统的默认中文字体差异并不明显。

使用自定义字体,平时上网多留意一些好看的字体,收藏之,以备不时之需。


相关文章
|
6天前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
16 2
|
11天前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
29 3
|
24天前
|
XML JSON API
ServiceStack:不仅仅是一个高性能Web API和微服务框架,更是一站式解决方案——深入解析其多协议支持及简便开发流程,带您体验前所未有的.NET开发效率革命
【10月更文挑战第9天】ServiceStack 是一个高性能的 Web API 和微服务框架,支持 JSON、XML、CSV 等多种数据格式。它简化了 .NET 应用的开发流程,提供了直观的 RESTful 服务构建方式。ServiceStack 支持高并发请求和复杂业务逻辑,安装简单,通过 NuGet 包管理器即可快速集成。示例代码展示了如何创建一个返回当前日期的简单服务,包括定义请求和响应 DTO、实现服务逻辑、配置路由和宿主。ServiceStack 还支持 WebSocket、SignalR 等实时通信协议,具备自动验证、自动过滤器等丰富功能,适合快速搭建高性能、可扩展的服务端应用。
86 3
|
28天前
|
存储 安全 关系型数据库
后端技术:构建高效稳定的现代Web应用
【10月更文挑战第5天】后端技术:构建高效稳定的现代Web应用
47 1
|
6天前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
78 44
|
2天前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
7 1
|
4天前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
7天前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
14 3
|
7天前
|
安全 数据库 开发者
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第26天】本文详细介绍了如何在Django框架下进行全栈开发,包括环境安装与配置、创建项目和应用、定义模型类、运行数据库迁移、创建视图和URL映射、编写模板以及启动开发服务器等步骤,并通过示例代码展示了具体实现过程。
24 2
|
7天前
|
前端开发 JavaScript API
前端框架新探索:Svelte在构建高性能Web应用中的优势
【10月更文挑战第26天】近年来,前端技术飞速发展,Svelte凭借独特的编译时优化和简洁的API设计,成为构建高性能Web应用的优选。本文介绍Svelte的特点和优势,包括编译而非虚拟DOM、组件化开发、状态管理及响应式更新机制,并通过示例代码展示其使用方法。
21 2