网页开发之字体(一)

转载 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. 不像图片每次需要重新生成,添加删除更方便。

程序员常用字体(vs字体修改方案)

字体不仅是设计师手中重要的武器,对我们开发人员来说,字体的选择也有许多讲究,一个好的、适合展示代码的字体,应该具备以下要素: 等宽的字符 简洁、清晰并且规范的字符形状 支持ASCII码为128以上的...
  • u014076894
  • u014076894
  • 2015年06月02日 16:32
  • 9851

iOS中字体的使用

有三种方式: 一、使用系统随附的字体 在使用之前,先把支持的所有字体打印出来,确保存在再使用:// 打印所有的系统已存在的字体 static void dumpAllFonts() { N...
  • DuYangLu
  • DuYangLu
  • 2016年07月10日 18:45
  • 1275

常用对话框:字体对话框

字体对话框的作用是用来选择字体。我们也经常能够见到。MFC使用CFontDialog类封装了字体对话框的所有操作。字体对话框也是一种模态对话框。        CFontDialog类的构造函数 ...
  • I_amKing
  • I_amKing
  • 2014年12月09日 14:15
  • 711

你在用哪种编程字体?

哪种字体最适合编程?在本文中,我们将看看各式编辑器所使用的默认字体,考察其他的编程字体以及探讨在评估编程字体时,希望得到什么。 程序员喜欢定制自己的开发环境。他们会安装酷酷的主题,顺手的...
  • hsc456
  • hsc456
  • 2016年08月05日 09:05
  • 4264

【ttf 压缩】html网页引用中文字体,文件过大,加载缓慢的解决办法【字蛛】【web font】

【以下有部分内容引用的网络文章】 我们在日常需求中,经常会碰到视觉设计师对某个中文字体效果非常坚持的情况,因为页面是否高大上,字体选择是很重要的一个因素,选择合适的字体可以让页面更优雅。面对这种问题...
  • yueyemoyan
  • yueyemoyan
  • 2016年07月23日 14:34
  • 13618

常见字体介绍

如题,最近发现手机字体是个大学问,头一次发现原来字体里头差别这么大。 首先常见中文字体,宋体,黑体,仿宋,楷体,行楷,等等。其中各种字体大致区别 字号,点制和号制,打印时一点为0.35mm,号制为...
  • me4weizhen
  • me4weizhen
  • 2017年03月15日 21:49
  • 523

css 使用@font-face 嵌入自定义字体或字体图标方法笔记

通常css使用font-family指定客户端显示字体的样式,本笔记目的在于解决客户端未安装指定字体,导致无法完成设计效果要求。与此同时现在大部分图标使用字体格式,因为它有矢量,体积小等等优点讲解如何...
  • guoguicheng1314
  • guoguicheng1314
  • 2016年11月19日 15:47
  • 4846

最佳eclipse字体推荐(个人认为)

首先大家可以看看这里面推荐的最佳十款字体,http://www.iteye.com/news/11102-10-great-programming-font 但是经过测试发现,排名第一的字体在ecli...
  • shijiebei2009
  • shijiebei2009
  • 2014年11月10日 19:02
  • 96064

10大最适合编程的字体推荐下载,让代码看起来更美更舒服!

现在有事没事就喜欢写写代码的人越来越多了,对于成天盯着屏幕工作的开发人员来说,编程代码可能是每天见得最多的东西了。可是绝大部分人都一直使用编辑器默认的字体,其实,换一套适合自己的编程字体不仅能让代码看...
  • andyhebear
  • andyhebear
  • 2016年05月13日 10:47
  • 4445

Android中字体颜色大全-146种(完整版)

 附Android中146种颜色对应的xml色值: xml version="1.0" encoding="utf-8"?> resources>     color name="w...
  • IOT_LI
  • IOT_LI
  • 2015年02月07日 20:11
  • 2357
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:网页开发之字体(一)
举报原因:
原因补充:

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