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)。

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

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


相关文章
|
1月前
|
前端开发 JavaScript 安全
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第27天】本文介绍了HTTP/2和HTTPS在前端性能调优中的应用。通过多路复用、服务器推送和头部压缩等特性,HTTP/2显著提升了Web性能。同时,HTTPS确保了数据传输的安全性。文章提供了示例代码,展示了如何使用Node.js创建一个HTTP/2服务器。
50 3
|
1月前
|
移动开发 开发者 HTML5
构建响应式Web界面:Flexbox与Grid的实战应用
【10月更文挑战第22天】随着互联网的普及,用户对Web界面的要求越来越高,不仅需要美观,还要具备良好的响应性和兼容性。为了满足这些需求,Web开发者需要掌握一些高级的布局技术。Flexbox和Grid是现代Web布局的两大法宝,它们分别由CSS3和HTML5引入,能够帮助开发者构建出更加灵活和易于维护的响应式Web界面。本文将深入探讨Flexbox和Grid的实战应用,并通过具体实例来展示它们在构建响应式Web界面中的强大能力。
40 3
|
1月前
|
设计模式 前端开发 数据库
Python Web开发:Django框架下的全栈开发实战
【10月更文挑战第27天】本文介绍了Django框架在Python Web开发中的应用,涵盖了Django与Flask等框架的比较、项目结构、模型、视图、模板和URL配置等内容,并展示了实际代码示例,帮助读者快速掌握Django全栈开发的核心技术。
152 45
|
14天前
|
前端开发 JavaScript UED
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势
在数字化时代,Web 应用性能优化尤为重要。本文探讨了CSS与HTML在提升Web性能中的关键作用及未来趋势,包括样式表优化、DOM操作减少、图像优化等技术,并分析了电商网站的具体案例,强调了技术演进对Web性能的深远影响。
21 5
|
23天前
|
缓存 安全 网络安全
HTTP/2与HTTPS在Web加速中的应用
HTTP/2与HTTPS在Web加速中的应用
|
17天前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
30 2
|
26天前
|
SQL 安全 前端开发
PHP与现代Web开发:构建高效的网络应用
【10月更文挑战第37天】在数字化时代,PHP作为一门强大的服务器端脚本语言,持续影响着Web开发的面貌。本文将深入探讨PHP在现代Web开发中的角色,包括其核心优势、面临的挑战以及如何利用PHP构建高效、安全的网络应用。通过具体代码示例和最佳实践的分享,旨在为开发者提供实用指南,帮助他们在不断变化的技术环境中保持竞争力。
|
1月前
|
前端开发 API 开发者
Python Web开发者必看!AJAX、Fetch API实战技巧,让前后端交互如丝般顺滑!
在Web开发中,前后端的高效交互是提升用户体验的关键。本文通过一个基于Flask框架的博客系统实战案例,详细介绍了如何使用AJAX和Fetch API实现不刷新页面查看评论的功能。从后端路由设置到前端请求处理,全面展示了这两种技术的应用技巧,帮助Python Web开发者提升项目质量和开发效率。
43 1
|
1月前
|
XML 安全 PHP
PHP与SOAP Web服务开发:基础与进阶教程
本文介绍了PHP与SOAP Web服务的基础和进阶知识,涵盖SOAP的基本概念、PHP中的SoapServer和SoapClient类的使用方法,以及服务端和客户端的开发示例。此外,还探讨了安全性、性能优化等高级主题,帮助开发者掌握更高效的Web服务开发技巧。
|
1月前
|
前端开发 安全 应用服务中间件
前端性能调优:HTTP/2与HTTPS在Web加速中的应用
【10月更文挑战第26天】随着互联网的快速发展,前端性能调优成为开发者的重要任务。本文探讨了HTTP/2与HTTPS在前端性能优化中的应用,介绍了二进制分帧、多路复用和服务器推送等特性,并通过Nginx配置示例展示了如何启用HTTP/2和HTTPS,以提升Web应用的性能和安全性。
34 3