网页开发之字体(一)

转载 2015年07月06日 20:46:40

前端也接触一年了,最近才开始对浏览器的渲染有所思考,并在继续学习中。

网页中字体的呈现,应该是浏览器在解析<p>some text</p>标签时,从系统中依次查找字体,进而把字体渲染出来。

<html>
<head>
    <style>
        p { font-family: Arial, Helvetica, sans-serif; }
    </style>
</head>
<body>
    <p>some text</p>
</body>
</html>
————————————————————————————————————————————————————

安全字体

上述<p>标签定义的字体样式就是一个安全字体。每种操作系统都有自己默认安装的字体,浏览器只能正常显示操作系统中安装了的字体。而不同的操作系统默认安装的字体不完全相同,有的甚至名称都不一样,在这种情况下,我们必须定义安全字体,使字体在所有的浏览器中都能够正常显示。

在上面这个 font-family 的定义中,我们选择 Arial 作为首选字体(注:Arial 字体是最常用的 sans serif 字体,也是 Windows 的默认字体,当字体很小是不容易阅读),但是,苹果系统中没有这个字体,所以我们选择 Helvetica(和 Arial 很相似)作为第二备选字体,最后我们选择 sans-serif 作为第三备选字体,如果在一个既没有 Arial 也没有 Helvetica 的系统里,那么浏览器会使用默认的 sans-serif 字体来渲染文字。这样,我们很大程度上保证了使用不同操作系统的访问者都能看到相同(至少是类似)的页面文字。

除了 Arial,常见的安全字体还有:

  • Verdana 字体,它是微软公司的核心字体之一,专门为屏幕显示而开发的。它的应用广泛,宽度大而易于阅读,是显示器中最清晰的字体。CSS 写法:font-family: Verdana, Geneva, sans-serif;
  • Times New Roman 字体,它是最常用的 serif 字体,是浏览器默认的字体。小号字的易读性也很差。CSS 写法:font-family: 'Times New Roman', Times, serif;

有兴趣的读者可以通过这个链接来查阅常用的安全字体。http://www.w3schools.com/cssref/css_websafe_fonts.asp

在网页开发中,应该尽量使用安全字体,也就是高度通用的字体,这样,访问者才能流畅的阅读网页的所有内容。

但是,网页设计师一定不会满足于使用这些安全字体,如何才能使用漂亮的字体,并能在普通用户的浏览器中被正确的渲染出来?答案是:使用@font-face 方案。

@font-face 标签简介

@font-face 被列为了 CSS3 的一项新特性,其实它并不是什么新鲜技术,它最早出现在 CSS2 的规范定义中,但是在 CSS2.1 中又被删除,现在被正式列入 CSS3。目前主流的浏览器(IE 4+/Firefox 3.5+/Chrome 1+/Safari 3.1+/Opera 10+)都能够支持这个属性,所以不用担心会有浏览器兼容性问题。

@font-face 允许您在网页中使用电脑中没有安装的字体,完全摆脱安全字体的限制。只需将字体包安装在服务器上,当用户加载网页时,字体包会自动下载到用户机器上,保证字体能够正确渲染。

随着@font-face 的不断流行,产生了许多新的字体格式图标集,称为网络字体。Google Fonts API 就是基于@font-face 的特性开发的一套优秀的网络字体库。

网络字体的优点有很多:

  1. 使用的是真正的文本,而不是图片,放大和缩小都不会影响渲染效果,用户体验好;
  2. 可以被搜索引擎辨认;
  3. 不像图片每次需要重新生成,添加删除更方便。

相关文章推荐

网站开发进阶(四十一)中文字体网页开发指南

网站开发进阶(四十一)中文字体网页开发指南前言           字体的选择,是网页开发的关键因素之一。      合适的字体,对网页的美观度(或可读性)有着举足轻重的影响。      但是,相比英...

当里个当,免费的HTML5连载来了《HTML5网页开发实例详解》连载(一)

读懂《HTML5网页开发实例详解》这个本书 你还在用Flash嘛?帮主早不用了 乔布斯生前在公开信《Flash之我见》中预言:像HTML 5这样在移动时代中创立的新标准,将会在移动设备上获得胜利。...
  • kgsew
  • kgsew
  • 2014年07月16日 17:09
  • 966

免费的HTML5连载来了《HTML5网页开发实例详解》连载(二)

最近新浪、百度、腾讯、京东、大众点评等流行的网站都加大了招聘HTML5的招聘力度,你还在等什么????...
  • kgsew
  • kgsew
  • 2014年07月18日 15:17
  • 1622

响应式网页开发的基本规则

响应式网页设计是针对多屏幕问题的一个很好的解决方案,但从印刷的视角来看有点困难。没有固定的页面尺寸,没有毫米或英寸,没有任何的物理限制,无从下手。为了desktop和mobile单独使用像素设计的方法...
  • xdongll
  • xdongll
  • 2016年03月22日 14:52
  • 608

微信网页开发问题汇总

最近做一个微信公众平台的一个订购网页,产生了好多问题,下面是问题与解决方法,欢迎指正学习。1.如何只让网页在微信打开,其他浏览器拒绝访问?因为是个订购网页,所以会牵扯恶意用户通过其他途径注册,购买,造...
  • xi_2130
  • xi_2130
  • 2015年10月07日 17:17
  • 372

微信iOS WKWebview 网页开发适配指南

微信iOS客户端将于2017年3月1日前逐步升级为WKWebview内核,需要网页开发者提前做好网站的兼容检查和适配。 背景WKWebView 是苹果在iOS 8中引入的新组件,目的是提供一个现代的...

HTML网页开发 燕十八 第6课学习笔记-浮动布局

float:left 尽量靠左漂浮 float:right 尽量靠右漂浮 这个值如果没有定义,就以左上角为顶点漂浮,可能存在遮盖 ...

网页开发的阶段总结(四)--JS与PHP之间大数据的传送

在前面 的网页开发的阶段总结(三)中,我们知道JS与PHP之间直接互相调用,往往有很多不便,而且一次只能传送一个数据结果进行返回。而通过ajax方法可以实现JS一次性读取php的所传送过来的大量数据。...

高性能网页开发

上个月,Yahoo!优异性能(Yahoo!'s Exceptional Performance)开发团队成员 Stoyan Stefanov 出 席了蒙特利尔的2008魁北克PHP会议演讲。他提供了他...

化整为零的次世代网页开发标准: WSGI

今天,我要介绍Python网页开发的标准: WSGI,我个人在看见这类英文缩写时,都一定会试着去记住它的全写,因为缩写本身一点意义都没有,难以记忆,WSGI的全写是” Web Server Gat...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页开发之字体(一)
举报原因:
原因补充:

(最多只允许输入30个字)