Web 与排版学上的字体问题

 更新时间:2016年9月20日 19:04  点击:1484

关于字体的讨论,其实无论是国外还是国内,都已经有不少,可是我发现绝大部分的内容或者有失偏颇,或者不够全面,下面我试图将自己一段时间内的观点总结一下,以求提出一个比较容易接受的 CSS 字体选择的建议。

事关大小

字体的大小总是一个困扰人的问题,用绝对单位还是用相对单位?或者具体来说,用什么单位?ex? em? pt? px? 百分比? 让我们看看 CSS 2.1 Spec 中的说明:

相对大小包括:em, ex, px

绝对大小包括:in, cm, mm, pt, pc

em 就是相对 font-size 制定的大小而言的,例如 margin: 1.2em 就是指设置 1.2 个字符宽度的 margin,当 em 本身用于 font-size 时,指的是它所继承元素的相对大小。

百分比也是相对 font-size 而言的。

因此我认为,em 和百分比都不适合设置字体的大小,因为相互变动的因素太多了,修改一个地方就有可能影响很多其他的地方。ex 是根据拉丁字母的 x 的高度而言的,这不适合汉字的大小,所以也否决了。px 是根据当前显示设备的解析度而言的,同一个 px 对应不同的设备——比如屏幕或纸张——实际的大小会有一定差异。

所以我认为,如果网页中应该存在作为绝对参照系的长度,那么 pt 和 px 应该是首选,其他的长度根据这个绝对参照系,按照百分比或者 em 来变动。

下面谈谈网页和印刷中大小造成的差异。99% 的网页是用来在屏幕上阅读的,而问题在于,屏幕的解析度要比纸张低得多,所以如果直接把字体按照纸张上印刷的那个大小显示,肯定是看不清的,仅就英文字体而言,许多细微的点划、衬线都没法在那么低的解析度下表现出来,所以我们只能用专门设计给屏幕显示的字体。

这些字体的优劣是很难评述的,有一种看法认为,尽管纸张印刷中都倾向于有衬线 (serif) 的字体比无衬线 (sans-serif) 的要易读,但屏幕上无衬线的字体反而要好一些。所以微软把 Verdana 吹捧为了最适合网页使用的字体。我通常也偏向于使用 Verdana、Arial 多于 Times、Georgia。

对于中文字体的情况有所不同,中文字体在屏幕上的清晰显示依赖的是点阵字体,或者简单的说,就是微软随 Windows 提供的宋体和新宋体 (simsun & nsimsun),这套字体是华康公司 (Dynalab) 设计的,对 9pt 到 12pt 左右的字体都设计了对应的点阵字体。其中使用得最广泛的是 9pt, 10.5pt 和 12pt 的字体:

那么比这个大小要大的汉字呢?就要依赖操作系统的字体圆整 (anti-alias,以下简称 aa) 技术了,一般大家认为,

  今天就网页结构进行一下讨论。

  一个网页的结构的好坏,对网页的加载速度有着很大的影响!

  1、关于框架结构

  一般情况下,应尽量避免使用框架结构,因为浏览器必须对框架中的每个页面分别进行请求!这必然会增加服务器的负担。另外,现在还有少数用户使用的浏览器并不支持框架结构显示。 当然在一些地方,框架结构还是显得非常方便,比如:聊天室、论坛、社区、软件下载。 

  2、关于表格

  表格的应用不仅仅限于,在一些内容列表的时候时候,对于网页的整个布局,表格有着非常重要的作用。为了能使大量的内容在网页上布置的井井有条,一般通过没有边框的来将网页分块,然后将不同的内容放在不同的单元格中。表格的使用是有一些技巧的:

  首先,尽量避免使用结构复杂的表格,因为结构复杂的表格,有可能使浏览器多次刷新表格。

  其次,能将一个表格分为两个或两个以上的时候因为分为两个,因为浏览器只有在整个表格的内容全部读入以后再输出显示,如果表格中的内容非常的多,那么在加载过程中,浏览器在表格读入完毕以前将一直显示空白。

  最后,表格嵌套不要超过3层,层次太多的话在加载表格的时候会使浏览器花大量的时候处理表格结构。 新浪网的首页页面时候很好的例子,大家可以保存它有编辑软件打开查看其结构。 熟练的使用表格是作出美观的网页所必须的!



  国外网站经常封闭中国的ip访问,经一番查找,发现只要修改网站目录下的.htaccess文件就可以达到目的。

  那如果把中国的IP地址换成小日本的呢?
 
RewriteEngine On
RewriteCond %{REMOTE_ADDR} ^139.175.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^168.95.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^61.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^218.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^202.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^203.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^210.(.*)$ [OR]
RewriteCond %{REMOTE_ADDR} ^211.(.*)$
RewriteCond %{REMOTE_ADDR} !^202.60.132.55$
RewriteCond %{REMOTE_ADDR} !^210.0.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.0.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.0.1[0-1][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.0.12[0-7].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.4[8-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.5[0-5].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.[7-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.1[0-1].(.*)$
RewriteCond %{REMOTE_ADDR} !^210.2[3-4].(.*)$
RewriteCond %{REMOTE_ADDR} !^211.2[5-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^211.31.(.*)$
RewriteCond %{REMOTE_ADDR} !^203.[1-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.1[0-1][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.1[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.2[1-4][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^203.134.25[0-1].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.10.(.*)$
RewriteCond %{REMOTE_ADDR} !^202.20.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.20.[1-7][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.20.8[0-1].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.21.[8-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.21.[1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.21.[1-9][1-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.22.[0-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.27.(.*)$
RewriteCond %{REMOTE_ADDR} !^202.129.6[4-9].(.*)$
RewriteCond %{REMOTE_ADDR} !^202.129.[7-9][0-9].(.*)$
RewriteCond %{REMOTE_ADDR}

如果您使用的 WEB 浏览器是IE5或以上版本,那么当您将某些网站(如:网易、Yahoo等等)加入到“收藏夹”后,您是否注意到在这些网站标题的旁边还有一个独具个性的图标呢?这就是“收藏夹图标”(F avorites Icon)。就拿“网易”来说,在标题“Welcome to netease !” 的左边,IE5 默认的图标被换成了一个红色的变体中文“易”字。非但如此,如果您正在浏览“网易”,这时 IE5 的地址栏中的图标也同样是一个红色的“易”字。也正是因为这些个性化的图标使得他们在您的“收藏夹”众多的白底蓝 e 中显得格外的醒目。 

  您是不是也希望为您的网站加上一个体现您的主页的风格和个性的图标呢?其实要实现这一目的非常简单。 

  第一步,准备一个图标制作软件。 
  首先您必须了解所谓的图标(Icon)是一种特殊的图形文件格式,它是以 .ico 作为扩展名。普通的图像设计软件无法使用这种格式,所以您需要到一个软件下载站点去下载一个图标制作软件。您也可以访问 http://www.favicon.com/ ,这里提供一个免费的在线“收藏夹”图标生成器,如果您 E 文够好的话,在这里您还可以了解到更多的关于“收藏夹”图标的知识。 
  第二步,确定“收藏夹”图标的规格。 
  “收藏夹”图标有着它特有的规格:图标的大小为 16 * 16(以像素为单位);所使用的颜色不得超过 16 色。 (为了清晰) 

  第三步,设计一个属于您自己的图标。 
  您可以将您的网站的 LOGO 做成一个缩图或者另外设计一个别具特色的图案来作为“收藏夹”图标。总之,它一定要是属于您自己的,并且能很好的代表您的网站的风格和个性。然后将这个图标文件命名为:f avicon.ico。 

  最后,将这个图标文件(favicon.ico)上传到您的网站所在的服务器的根目录下。您不需要对您的网页文件作任何的修改,IE5 会自动的不停的搜索您的网站的根目录,只要它一发现了 favicon.ico 这个文件,就会将该图标显示在访问者的地址栏和收藏夹列表中了。 

  如果您希望为不同的页面设置不同的“收藏夹”图标,那么您就需要在该网页文件的 HEAD 部分加入下面的内容: 
<INK REL="SHORTCUT ICON" HREF="http://www.mydomain.com/myicon.ico"> 

  注意:该图标的路径一定要使用绝对路径。 

  还有一点需要说明的是:有些 Web 站点的主机服务器(如:Geocities )不支持图标文件格式,这时您就需要与管理员联系,要求他开通图标文件格式的支持。 

  马上行动,让您的网站也拥有一个“收藏夹”图标吧!


  帮你的页面瘦身

  我们浏览网页实际上是将虚拟主机中的网页内容下载到本地硬盘,再用浏览器解释查看的。下载网页的快慢在显示速度上占了很大比重,所以,网页本身所占的空间越小,那么浏览速度就会越快。这就要求在做网页的时候遵循一切从简的原则,如:不要使用太大的Flash动画、图片等资源。干净、简洁的页面会给人一种思路明朗的感觉。   

  网站计数器代码放置的技巧

  在网页里放置计数器可以统计网站的访问流量,为站长和广告商家提供访问依据,但是,不管功能有多强大的网站统计系统,都会有出故障的时候。如果直接把统计代码放到页面内容的前面,或者放在一个Table或者div标签里,那么在计数器不能访问的时候,你的页面上那个Table或者div就会产生几十秒钟的延迟,导致页面很长时间才能访问。所以,要提高网站的速度,就要讲究统计代码放置的位置,正确的方法是:把统计代码放到页面的最下面,并且不要和页面内容同在一个Table或者div标签里。可以在页面代码的最下方直接放置统计代码,或者在最下方单独做一个Table或者div来放置计数器。这样,在计数器不能访问的时候,你的网站速度也不会受到丝毫影响。   

  制作友情链接的学问

  很多站长都喜欢直接引用友情网站上的图片URL,这样图片要先经过加载才能显示的,各个友情网站的访问速度不一样,整个表格都要等图片都下载完了才能显示出来,这样大大降低了网页的速度。因此,做友情链接时应尽量做到:   

  1.只做文字链接:做文字链接是不会延迟网页速度的。

  2.将所有链接放到一个独立的分页去,然后在首页链接上该页。  

  3.如果友情链接一定要出现在首页,请将链接所在的整个Table放到页面的最下方,因为页面是由上到下逐行显示的,将其放到页面的最下方,不会延迟其他内容的显示。  

  4.友情链接的LOGO图片先下载后再传到自己的网页空间,这样,速度由自己的网站空间决定而不受友情网站的影响。


<
[!--infotagslink--]

相关文章

  • Springboot如何实现Web系统License授权认证

    这篇文章主要介绍了Springboot如何实现Web系统License授权认证,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-05-28
  • C#使用Http Post方式传递Json数据字符串调用Web Service

    这篇文章主要为大家详细介绍了C#使用Http Post方式传递Json数据字符串调用Web Service,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2020-06-25
  • PHP传值到不同页面的三种常见方式及php和html之间传值问题

    在项目开发中经常见到不同页面之间传值在web工作中,本篇文章给大家列出了三种常见的方式。接触PHP也有几个月了,本文总结一下这段日子中,在编程过程里常用的3种不同页面传值方法,希望可以给大家参考。有什么意见也希望大...2015-11-24
  • js修改input的type属性问题探讨

    js修改input的type属性有些限制。当input元素还未插入文档流之前,是可以修改它的值的,在ie和ff下都没问题。但如果input已经存在于页面,其type属性在ie下就成了只读属性了,不可以修改。...2013-10-19
  • Mysql常见问题集锦

    1,utf8_bin跟utf8_general_ci的区别 ci是 case insensitive, 即 "大小写不敏感", a 和 A 会在字符判断中会被当做一样的; bin 是二进制, a 和 A 会别区别对待. 例如你运行: SELECT * FROM table WHERE txt = 'a'...2013-10-04
  • InterlliJ IDEA2020新建java web项目找不到Static Web的解决

    这篇文章主要介绍了InterlliJ IDEA2020新建java web项目找不到Static Web的解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-09-02
  • Mysql大小写敏感的问题

    一、1 CREATE TABLE NAME(name VARCHAR(10)); 对这个表,缺省情况下,下面两个查询的结果是一样的:复制代码 代码如下: SELECT * FROM TABLE NAME WHERE name='clip'; SELECT * FROM TABLE NAME WH...2015-03-15
  • linux mint 下mysql中文支持问题

    一.mysql默认不支持中文,它的server和db默认是latin1编码.所以我们要将其改变为utf-8编码,因为utf-8包含了地球上大部分语言的二进制编码 1.关闭mysql服务 sudo /etc/init.d/mysql stop 2.修改mysql配置文件 mysql配...2015-10-21
  • 详解在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入)

    这篇文章主要介绍了在IDEA中将Echarts引入web两种方式(使用js文件和maven的依赖导入),本文通过图文并茂的形式给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2020-07-11
  • jQuery mobile 移动web(6)

    这篇文章主要介绍了jQuery mobile 移动web(6)的相关资料,需要的朋友可以参考下...2015-12-21
  • js简单实现调整网页字体大小的方法

    这篇文章主要介绍了js简单实现调整网页字体大小的方法,通过javascript动态修改页面元素样式实现调整网页字体的功能,非常简单实用,需要的朋友可以参考下...2016-07-29
  • C#使用队列(Queue)解决简单的并发问题

    这篇文章主要介绍了使用队列(Queue)解决简单的并发问题,讲解的很细致,喜欢的朋友们可以了解一下...2020-06-25
  • jQuery UI结合Ajax创建可定制的Web界面

    这篇文章主要为大家详细介绍了jQuery UI结合Ajax创建可定制的Web界面,如何利用Ajax和jQuery UI创建具有各种定制功能的高度可定制的UI,感兴趣的小伙伴们可以参考一下...2016-06-24
  • JavaScript实现点击按钮字体放大、缩小

    字体可以调节大小,极大了满足了用户体验度,接下来通过本文给大家介绍JavaScript实现点击按钮字体放大、缩小实例代码,需要的朋友参考下吧...2016-03-01
  • Microsoft Expression Web 简体中文正式版 官方下载地址

    Microsoft Expression Web 简体中文正式版相对于早期的 Microsoft Expression Web Designer CTP1(英文)除了它是正式的中文版外,有进步的地方1.对标签的id名称加上了css的代...2020-06-25
  • Tomcat首次部署web项目流程图解

    这篇文章主要介绍了Tomcat首次部署web项目流程图解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下...2020-12-11
  • web项目开发之JS函数防抖与节流示例代码

    这篇文章主要介绍了web项目开发之JS函数防抖与节流实现的示例代码及原理解析,有需要的朋友可以借鉴参考下,希望能够有所帮助...2021-09-24
  • Web制作验证码功能实例代码

    web开发中,经常会使用验证码功能,例如登录、注册,或其他关键功能之前经常会使用。下面通过实例代码给大家介绍Web制作验证码功能实例代码,感兴趣的朋友一起看看吧...2017-06-24
  • windows 10 安装和使用中5个常见问题

    2015年7月29日0点起,Windows 10推送全面开启,Windows7、Windows8.1用户可以免费升级到Windows 10,用户也可以通过系统升级到Windows10,在这过程中,用户会遇到这样那样的问题,下面小编总结了windows 10 安装和使用中5个常见问题,需要的朋友可以参考下...2016-01-27
  • 创建一个完整的ASP.NET Web API项目

    ASP.NET Web API具有与ASP.NET MVC类似的编程方式,ASP.NET Web API不仅仅具有一个完全独立的消息处理管道,而且这个管道比为ASP.NET MVC设计的管道更为复杂,功能也更为强大。下面创建一个简单的Web API项目,需要的朋友可以参考下...2021-09-22