jQuery 自定义网页滚动条样式插件 mCustomScrollbar 的介绍和使用方法

系统默认的滚动条样式,真的已经看的够恶心了。试想一下,如果在一个很有特色和创意的网页中,出现了一根系统中默认的滚动条样式,会有多么的别扭。 为了自己定义网页中的滚动条的方法,我真的已经找了很久了,就目前寻找的成果来说,找到了两个比较不错的 jQuery 插件:jScrollPane mCustomScrollbar 。关于前者,大家见过的可能比较多,但是这个插件太过于古老而且功能不强大。效果在几年前非常不错,但是放在现在就不好说了。所以我选择了后者: mCustomScrollbar。下图是两者官方示例的简单对比:

jScrollPane 和 mCustomScrollbar 的对比

本文就是介绍如何使用这个插件,大部分的内容,是根据mCustomScrollbar 官方的介绍页面进行一个翻译,但将其部分内容修改,同时增加一些自己在使用中的一些技巧。

关于 mCustomScrollbar

mCustomScrollbar 使用了 jQuery UI,可以通过灵活的通过 CSS 定义你的滚动条。同时可以定义垂直的和水平的滚动条,并且通过 Brandon Aaron jquery mouse-wheel plugin 提供了鼠标滚动的支持,滚动的过程中,还可以缓冲滚动使得滚动更加的平滑。可以自动调整滚动条的位置并且可以定义滚动到的位置等。总之,你知道非常好用就好了。

mCustomScrollbar 效果图

点击这里可以下载这个 mCustomScrollbar

点击这里可以查看这个 mCustomScrollbar 的 Demo

如何使用 mCustomScrollbar

首先,先请你下载作者提供的插件包,里面包含了所有的插件文件和一些例子。以下的四个文件时必须要上传到你的服务器上的:jquery.mCustomScrollbar.js, jquery.mousewheel.min.js, jquery.mCustomScrollbar.css and mCSBbuttons.png。_

第一步:加载插件的样式文件。

可以使用以下代码,引入插件包中的 jquery.mCustomScrollbar.css 样式表文件。

<link href="jquery.mCustomScrollbar.css" rel="stylesheet" type="text/css" />

第二步:加载必须的 JS 文件。

需要加载的文件有如下几个:jQuery、jQuery UI, jquery.mousewheel.min.js 和 jquery.mCustomScrollbar.js。jQuery 和 jQuery UI 是必须的, jquery.mousewheel.min.js 是用来提供滚动支持的,jquery.mCustomScrollbar.js 则是插件的主文件。要注意的是,加载顺序也要按照上面说的来,如果不注意加载的顺序,可能会导致失败,原因请看本人的:网页中代码的顺序是不可忽略的细节

你可以使用如下代码加载:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script src="jquery.mousewheel.min.js"></script>
<script src="jquery.mCustomScrollbar.js"></script>

你可以把这段代码放在文档的底部来缩短加载网页内容的时间,原因也可以在上面介绍的那篇文章中看到。这里的加载的代码使用了 Google 的 CDN 加速服务来获得 jQuery 和 jQuery UI,这样的有好处也有坏处。在插件包中,包含了 jQuery 和 jQuery UI(这个 UI 被作者精简了,包含这个插件必须的模块,大小只有 43KB),你当然可以把插件包中的这两个库上传到服务器上使用。它们在插件包的 jquery 目录里面。

如果当你在使用类似 Google 或者 Sina 的常用 Javascript 库的加速服务的话,更推荐采用下面的写法(以 Google 为例):

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script>!window.jQuery && document.write(unescape('%3Cscript src="jquery/jquery-1.7.2.min.js"%3E%3C/script%3E'))</script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/jquery-ui.min.js"></script>
<script>!window.jQuery.ui && document.write(unescape('%3Cscript src="jquery/jquery-ui-1.8.21.custom.min.js"%3E%3C/script%3E'))</script>

如果这样写,它会在 库 加载完成之后,做一个判断:如果没有成功加载这个库,那么就生成一段新的 Javascript 引用代码,用来引用本地的文件。这样,如果外面的库无法使用,就会加载本地的库,而不会导致插件无法使用。推荐这种写法。

第三步:对 内容块 激活这个插件

<script>
    (function($){
        $(window).load(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

这里我使用了(function($){ … })(jQuery);来包裹 jQuery 代码,这是为了避免 jQuery 和其他的 库 在使用中产生冲突。我还用了window load ($(window).load()) 来激活我的插件功能,因为这样,就可以保证在页面对象全部加载完成之后,加载我的插件。当然,你也可以使用常规的 jQuery 代码加载方法,但是你要明白 ready 和 load 方法之间的不同。一般的 jQuery 代码加载方法如下:

<script>
    (function($){
        $(document).ready(function(){
            $(".content").mCustomScrollbar();
        });
    })(jQuery);
</script>

第四步:在页面中添加内容和样式

没有内容当然谈不上出现这个插件的效果了。就上述示例代码来说,我们应该在页面中定义一个 class 为 content 的 内容块。并添加一些测试数据:

<div class=".content">
    <p>测试数据.......还有很多很多</p>
</div>

这样当然不算完,自定义滚动条的样式,必须要出现滚动条才可以。所以我们还要对这个块加上一些 CSS 来让它出现滚动条,否则是没有效果的。加上的样式很简单,就是定义一个宽或者高或者宽高都定义,然后再定义一个 overflow 值为 auto。这样如果内容超出了指定的宽高,就会出现一个滚动条。例:

width:100px;height:100px;overflow:auto;

完成上述的操作之后,带有滚动条的内容块的滚动条,就变成这个插件的默认样式了。

使用 mCustomScrollbar 之后的效果图

官方的默认样式相对于白色的对比度不高,所以为了显示的明显一点,我加了一个深色的背景色。

当然还有很多参数开扩展插件的功能,这些参数的使用方法过后再讲。先来说说上面用到的这些文件的用途和简单介绍:

jQuery:这个插件的必备库,你懂。

jQuery UI:扩展 jQuery 库并且为我们的滚动条提供了简单的动画和拖动功能。

jquery.mousewheel.min.js:这是 Brandon Aaron 编写的一个伟大的只有 2kb 的插件,它面向所有的操作系统和浏览器,为我们提供了鼠标滚动事件的支持。

jquery.mCustomScrollbar.js:这是我们的插件主文件。在插件包的 minified 你可以找到它的压缩版。

jquery.mCustomScrollbar.css: 这个 CSS 文件是让我们来定义边栏用的。你可以在这个文件中定义你的边栏,当然你可以在其他的 CSS 文件中定义,要注意的是,你要用 CSS 中的顺序,其中的优先级关系来覆盖这个文件中的定义。否则可能会无效,关于网页中代码顺序,详情可以看一下 潜行者 m 的这篇文章:网页中代码的顺序是不可忽略的细节

mCSB_buttons.png: 这个 png 图片文件,包含了向上向下向左向右滚动的按钮。可以使用 CSS sprites 技术,来使用这个图片中的相应按钮。插件包中包含了这个图片的 PSD 源文件(sources/mCSB_buttons.psd ),你可以根据自己的需求自定义。

完成这些,你已经可以正确的使用这个插件,并且看到了相应的效果。但是没有人愿意使用如此强大的插件来实现这个默认的效果,下面来说一下进阶的使用。

mCustomScrollbar 的参数介绍

这个插件的功能巨大,所以参数也很多,参数值当然更多。在介绍参数的时候,我想先为新手介绍两种参数值的写法,分别是直接的和合并的。

我 们平时接触的插件用的参数,都是直接跟着参数写上参数值,这个比较直观简单。在这个插件中,参数值太多,所以把一些参数合并起来写。例如下面要介绍到的 scrollButtons 这个参数,它下面有四个属性:enable、scrollType、scrollSpeed、scrollAmount,这四个属性也分别有自己的值,来 实现相应的功能。如果再加上其他的参数,那么我们应该这样写:

$("#main").mCustomScrollbar({
 scrollButtons:{
 enable:false,
 scrollType:"continuous",
 scrollSpeed:20,
 scrollAmount:40
 },
 horizontalScroll:false,
 });

一定要注意闭合的括号和语句之间的逗号,新手可能会因为不小心,没有严格的按照这个规则写导致插件无法运行。好,下面我们介绍详细的参数。

  • set_width:false | 设置你内容的宽度 值可以是像素或者百分比
  • set_height:false | 设置你内容的高度 值可以是像素或者百分比
  • horizontalScroll:Boolean | 是否创建一个水平滚动条 默认是垂直滚动条 值可为:true(创建水平滚动条) 或 false
  • scrollInertia:Integer | 滚动的惯性值 在毫秒中 使用 0 可以无滚动惯性 (滚动惯性可以使区块滚动更加平滑)
  • scrollEasing:String | 滚动动作类型 查看 jquery UI easing 可以看到所有的类型
  • mouseWheel:String/Boolean | 鼠标滚动的支持 值为:true.false,像素 默认的情况下 鼠标滚动设置成像素值 填写 false 取消鼠标滚动功能
  • mouseWheelPixels:Integer | 鼠标滚动中滚动的像素数目 值为以像素为单位的数值
  • autoDraggerLength:Boolean | 根据内容区域自动调整滚动条拖块的长度 值:true,false
  • scrollButtons:{ enable:Boolean } | 是否添加 滚动条两端按钮支持 值:true,false
  • scrollButtons:{ scrollType:String } | 滚动按钮滚动类型 值:”continuous”(当你点击滚动控制按钮时断断续续滚动) “pixels”(根据每次点击的像素数来滚动) 点击这里可以看到形象的例子
  • scrollButtons:{ scrollSpeed:Integer } | 设置点击滚动按钮时候的滚动速度(默认 20) 设置一个更高的数值可以更快的滚动
  • scrollButtons:{ scrollAmount:Integer } | 设置点击滚动按钮时候每次滚动的数值 像素单位 默认 40 像素
  • advanced:{ updateOnBrowserResize:Boolean } | 根据百分比为自适应布局 调整浏览器上滚动条的大小 值:true,false 设置 false 如果你的内容块已经被固定大小
  • advanced:{ updateOnContentResize:Boolean } | 自动根据动态变换的内容调整滚动条的大小 值:true,false 设置成 true 将会不断的检查内容的长度并且据此改变滚动条大小 建议除非必要不要设置成 true 如果页面中有很多滚动条的时候 它有可能会产生额外的移出 你可以使用 update 方法来替代这个功能
  • advanced:{ autoExpandHorizontalScroll:Boolean } | 自动扩大水平滚动条的长度 值:true,false 设置 true 你可以根据内容的动态变化自动调整大小 可以看 Demo
  • advanced:{ autoScrollOnFocus:Boolean } | 是否自动滚动到聚焦中的对象 例如表单使用类似 TAB 键那样跳转焦点 值:true false
  • callbacks:{ onScrollStart:function(){} } | 使用自定义的回调函数在滚动时间开始的时候执行 具体请看 Demo
  • callbacks:{ onScroll:function(){} } | 自定义回调函数在滚动中执行 Demo 同上
  • callbacks:{ onTotalScroll:function(){} } | 当滚动到底部的时候调用这个自定义回调函数 Demo 同上
  • callbacks:{ onTotalScrollBack:function(){} } | 当滚动到顶部的时候调用这个自定义回调函数 Demo 同上
  • callbacks:{ onTotalScrollOffset:Integer } | 设置到达顶部或者底部的偏移量 像素单位
  • callbacks:{ whileScrolling:function(){} } | 当用户正在滚动的时候执行这个自定义回调函数
  • callbacks:{ whileScrollingInterval:Integer } | 设置调用 whileScrolling 回调函数的时间间隔 毫秒单位
    下面是所有参数的列表和它们的默认值
    $(".content").mCustomScrollbar({
    set_width:false,
    set_height:false,
    horizontalScroll:false,
    scrollInertia:550,
    scrollEasing:"easeOutCirc",
    mouseWheel:"auto",
    autoDraggerLength:true,
    scrollButtons:{
      enable:false,
      scrollType:"continuous",
      scrollSpeed:20,
      scrollAmount:40
    },
    advanced:{
      updateOnBrowserResize:true,
      updateOnContentResize:false,
      autoExpandHorizontalScroll:false,
      autoScrollOnFocus:true
    },
    callbacks:{
      onScrollStart:function(){},
      onScroll:function(){},
      onTotalScroll:function(){},
      onTotalScrollBack:function(){},
      onTotalScrollOffset:0,
      whileScrolling:false,
      whileScrollingInterval:30
    }

mCustomScrollbar 的方法

update

用法:\$(selector).mCustomScrollbar(“update”);

调用 mCustomScrollbar 函数的 update 方法去实时更新滚动条当内容发生变化(例如 通过 Javascript 增加或者移除一个对象、通过 ajax 插入一段新内容、隐藏或者显示一个新内容等)

下面是例子:

$(".content .mCSB_container").append("<p>New content here...</p>");
$(".content").mCustomScrollbar("update");
$(".content .myImagesContainer").append("<img src='myNewImage.jpg' />");
$(".content .myImagesContainer img").load(function(){
  $(".content").mCustomScrollbar("update");
});
$("#content-1").animate({height:800},"slow",function(){
  $(this).mCustomScrollbar("update");
});

当新内容完全加载或者动画完成之后,update 方法一直被调用。

scrollTo

用法:\$(selector).mCustomScrollbar(“scrollTo”,position);

你可以使用这个方法自动的滚动到你想要滚动到的位置。这个位置可以使用字符串(例如 “#element-id”,“bottom” 等)描述或者是一个数值(像素单位)。下面的例子将会滚动到最下面的对象

$(".content").mCustomScrollbar("scrollTo","last");

scrollTo 方法的参数

  • \$(selector).mCustomScrollbar(“scrollTo”,String); | 滚动到某个对象的位置,字符串型的值可以是 id 或者 class 的名字
  • \$(selector).mCustomScrollbar(“scrollTo”,”top”); | 滚动到顶部(垂直滚动条)
  • \$(selector).mCustomScrollbar(“scrollTo”,”bottom”); | 滚动到底部(垂直滚动条)
  • \$(selector).mCustomScrollbar(“scrollTo”,”left”); | 滚动到最左边(水平滚动条)
  • \$(selector).mCustomScrollbar(“scrollTo”,”right”); | 滚动到最右边(水平滚动条
  • \$(selector).mCustomScrollbar(“scrollTo”,”first”); | 滚动到内容区域中的第一个对象位置
  • \$(selector).mCustomScrollbar(“scrollTo”,”last”); | 滚动到内容区域中的最后一个对象位置
  • \$(selector).mCustomScrollbar(“scrollTo”,Integer); | 滚动到某个位置(像素单位)
    scrollTo 方法还有两个额外的选项参数

moveDragger: Boolean | 滚动滚动条的滑块到某个位置像素单位,值:true,flase。例如:\$(selector).mCustomScrollbar(“scrollTo”,200,{ moveDragger:true });

callback:Boolean | 执行回调函数当 scroll-to 完成之后,值:true,false 例如:\$(selector).mCustomScrollbar(“scrollTo”,200,{ callback:true });

disable

用法:\$(selector).mCustomScrollbar(“disable”);

调用 disable 方法去使滚动条不可用。如果想使其重新可用,调用 update 方法。disable 方法使用一个可选参数(默认 false)你可以设置 true 如果你想重新让内容区域滚动当 scrollbar 不可用时。例如:

$(".content").mCustomScrollbar("disable",true);

可以看一些使用 disable 的例子

destroy

用法:\$(selector).mCustomScrollbar(“destroy”);

调用 destroy 方法可以移除某个对象的自定义滚动条并且恢复默认样式

可以看一些使用 destroy 的例子

mCustomScrollbar 的原理

通过潜行者 m 对这些插件的使用,对这些插件的实现原理也做了一些分析。原理就是这样的:

首先获取要修改滚动条样式的内容区块,然后使用 CSS 隐藏掉默认滚动条,然后使用 Javascript 添加很多 HTML 结构,再配合 CSS 做出一个滚动条的效果。然后再使用 CSS 定义滚动条的样式,使用 Javascript 相应鼠标的滚动事件,产生滚动下滑的效果。

明白了这点,下面我们就可以看一下滚动条的结构,然后使用 CSS 对其进行定义了。

定义滚动条外观

先了解一下滚动条的 HTML 结构,下面是默认的垂直滚动条结构:

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonUp"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonDown"></a>
    </div>
  </div>
</div>

mCSB_buttonUp 和 mCSB_buttonDown 这两个 a 标签只有当你启用了 scroll buttons 功能的时候,才可用。下面这个结构是 水平滚动条 的结构:

<div class="content mCustomScrollbar _mCS_1">
  <div class="mCustomScrollBox mCSB_horizontal">
    <div class="mCSB_container">
      <!-- your long content here... -->
    </div>
    <div class="mCSB_scrollTools">
      <a class="mCSB_buttonLeft"></a>
      <div class="mCSB_draggerContainer">
        <div class="mCSB_dragger ui-draggable">
          <div class="mCSB_dragger_bar"></div>
        </div>
        <div class="mCSB_draggerRail"></div>
      </div>
      <a class="mCSB_buttonRight"></a>
    </div>
  </div>
</div>

知道这些之后,我们就可以来定义滚动条样式了,对于同一页面多个滚动条,官方推荐如下的写法:

._mCS_1 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 1st scrollbar dragger style... */
}
._mCS_2 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 2nd scrollbar dragger style... */
}
._mCS_3 .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar{
    /* 3rd scrollbar dragger style... */
}

为了更加直观的看到要定义的滚动条区域,官方给出了一张非常形象的图片

mCustomScrollbar 的滚动条结构图

根据这张图片,就可以很容易的定义滚动条的样式了。

更加进阶的使用

修改浏览器的滚动条

单单是修改某个内容区域的边栏已经无法满足我们的需求了,我们还想修改浏览器边栏应该怎么办?这当然是无法用 Javascript 来实现,因为浏览器是一个容器,Javascript 是容器里面的代码,怎么会把容器修改了呢?当然,有问题就肯定有解决方法。面对这个问题,解决方法很简单,就是虚拟出来一个浏览器窗口。

我们先添加一个 div 块,然后对这个 div 添加 position:absolute 属性,然后就可以指定它的 width 和 height 为 100% 或者稍微小点的 98%。这样,这个 div 就扩充到了整个浏览器界面,这样就可以被当做是一个网页的 body。然后加上 overflow:auto 让其超出自动出现滚动条。这样就可以模拟出修改了浏览器滚动条的效果。

关于更多的进阶使用和技巧,欢迎跟我交流,也可以关注本文,会在后面陆续添加。

字体是网页设计中最重要的细节

一个非创意性质的网页,最重要的内容,就是文字。出现了文字,就会出现文字排版、字体选择、字体颜色大小粗细等细节。而这些细节,往往是非常重要的细节。

好的字体排版,可以让人耐心的看完那些文字,然后得到其中的重要信息,还可以影响到浏览者阅读的心情。同时,字体的选择、大小等,还应该配合企业的 VI 识别系统,还需要配合你作品需要表达的思想感情来确定(例如古典风格,应该选择哥特式字体等)。

好了,关于字体的重要性,我就说这么多,再多说也是废话,只要大家知道很重要,要好好选择调整就好了。

字体的分类和格式

衬线和无衬线

衬线算是一种辅助性的小细节,笼统的谈,太过于抽象,我们来看两个例子:

这两个字体,是有衬线字体,大家可以看到在边角的位置,会多出一些修饰。这样的好处就是,可以清晰的分辨出字母和文字,分辨笔划的起始和终止。但是,这种字体如果设置字体大小太小的话、或者你里文字较远,则会受到衬线影响,分辨不清晰。同时,由于中文系统,默认的字体为宋体,见的太多导致审美疲劳,所以衬线字体比较适合打印文字以及正规文档中使用,通常不太适合使用在网页中。

这两个字体,就是无衬线字体,没有边角的修饰,令人看起来很整齐光滑,没有毛刺。比较适合用在网页中,让浏览者获取大量的文字信息而不会疲劳。

字体系列

字体之间最大的差异并不在于有无衬线,而在于字体与字体之间,形体的差异。但是很多字体(特别是英文字体)之间,差异不大,有些新字体甚至是对已有字体进行了细微的改造后产生的。

于是,就把字体分成了几个大的系列,同一个系列中的字体,大体相同,称作通用字体系列。其中包括以下五个系列:

serif:带衬线字体。Times New Roman 是默认的 serif 字体,中文字体的话,是宋体、仿宋之类的字体。

sans serif:无衬线字体。Arial 是默认的 sans-serif 字体,中文字体中,微软雅黑、黑体等都是这类字体。

monospace:等宽字体。这个字体里面的每个字母都有相同的宽度。通常用于显示程序代码等,Courier 是默认的 monospace 字体。而对于中文,每个汉字都是等宽的。

cursive:模仿手写字体。手写体,比较个性,通常用于标题、logo 等等。这个字体系列没有默认字体,英文来说,通常用 Comic Sans,中文的话,行书系列、草书系列的字体等,都可以算作手写字体。

fantasy:装饰用字体。多数用于标题,极具个性,字体繁多,艺术字体。无法对其的大小、形状下一个统一的定论,所以没有默认字体,在网页中,也通常很少用到,除非你有特殊的用处创意性的设计。

关于通用字体系列的更多解释、描述和字体举例,推荐大家查看在 W3school 上的资料。

字体的格式

格式就是指字体表现出来的粗细、宽度和姿态等等特征。看下面的这张图片:

里面的字,是相同大小的,同时排放在一条竖线上。为其应用了四种不同的字体后,体现出来了不同的形态和粗细大小。在中文字体中,不同的字体,在字间距中通常没有很大的变化。而在英文字体中,不同的字体会改变字母的大小,导致整体的尺寸布局不同,进而导致整个排版混乱。

相同的字体大小,在不同的字体下面,显示的效果几乎完全不同。这是英文字体选择中,比较麻烦和头疼的问题。

字体的选择

上面的这些理论,从某些角度和意义上来说,都是废话。如何选择合适的字体,才真正切合实际。那么我们应该如何选择在网页中使用的字体呢?

解决这个问题,我们先应该知道为什么要纠结于选择字体这个问题。我个人认为应该存在 实用性创意性 这两个方面的因素。创意性很好理解,就是想突破常规,配合自己的网页中的设计思想而选择相应的字体,例如表达程序员的思维,就对代码使用等宽字体,表达恐怖、古典,使用哥特式字体等等。这点自己去找字体好了,不再赘述。最主要的问题是在于 实用性 的方面。

实用性问题,即不需要太过于华丽的字体,只需要大家看的都舒服、稍微带点自己的特色即可。你会说,很容易啊,直接 CSS 定义一条,填上个字体就好了。如果真这样,那就太好了。浏览器解析字体的过程实际上是这样的,当浏览器加载 CSS 后,解析到有关字体的样式,它会在你的系统中查找这个字体,只有找到了相应的字体文件,才会根据那个字体文件对网页中的文字进行渲染,显示出你想要的效果。

既然这样,如果你的操作系统中,并没有安装网页中定义的那种字体,就无法渲染出那种字体的效果,而通常使用当前系统的默认字体来渲染。那么你原有的设计,就不行了,你设计时觉得挺好,字体、位置、大小合适,但在别人的电脑上,清一色的宋体。所以这个问题,才是选择字体的难处所在。当然,有问题就有解决方式:

使用经典通用字体

不同操作系统都有不同的字体系统,但既然是字体,总有一些比较经典老牌的字体共同存在于各个系统中。例如无衬线的 Arial 字体,它产生的时间比较早,同时价格低廉,所以从早期就被 windows 操作系统使用,在其他的操作系统中,也会有较好的不同于默认字体的显示效果。所以 我爱水煮鱼潜行者 m 博客 这些网站,直接在 CSS 中声明使用一个字体:Arial。

使用多个字体属性

上面的方法很简单,但是不灵活,注重简单而不注重细节。CSS 做的很好,它可以在一个网页中,声明指定多个字体,这样当写在前面的字体,在当前操作系统中没有的话,就会使用后面字体顶替。所以当你看一些网页作品的时候,会发现它的 CSS 中的 font-family 属性,指定了一大堆的 字体 名称。但这个也不是可以随便指定的,也有一些注意事项。

你应该这样做,先确定你网页中需要用到的字体,然后确定属于哪个字体系列有无其他的相近字体以及衍生字体,然后编写字体属性。顺序如下:最想用的字体》》可以代替的相近字体》》相近通用字体。例如如下写法:

font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;

这样的意思就是,优先使用 Times 字体,然后系统没有的话,查找同型异名的 TimesNR 字体,如果没有,寻找系统中的相近字体 New Century Schoolbook 等其他字体,最后如果都无法找到,就使用通用字体 serif ,这样浏览器就会寻找系统中的 无衬线 的默认字体,来代替。

字体的大小选择

形容字体大小的单位

在 CSS 中,最常用的描述字体大小的单位有两个:empx。通常认为 em 为相对大小单位,px 为绝对大小单位。但从实际应用中来讲,px 像素其实也是一种相对大小单位。例如,在一块 15 寸分辨率为 800x600 像素的屏幕上,10px 大小的文字,要比一块 10 寸分辨率 1024x768 像素的屏幕上的 10px 大小的文字显得更大一些。下面来说一下它们的区别和用法等。

px:像素单位,10px 表示 10 个像素大小,在现在的网页设计中,常被用来表示字体大小。很方便很直观,但是有一些弊端。对于可用性不太友好,因为是“绝对”单位,所以有些浏览器(早期)的字体放大缩小功能失效。浏览器的默认字体大小为 16px ,早期的网页,由于屏幕分辨率比较低,通常采用 12px 作为网页正文的标准字体大小。但是在现在,感觉有点偏小,比较长的文章来说,浏览者看起来费劲。现在我更主张使用 14px 作为标准字体,16px 作为中等字体,18px 作为较大字体,12px 作为偏小字体比较合适。

em:相对大小,它表示的字体大小不固定,根据基础字体大小进行相对大小的处理。浏览器默认的字体大小为 16px,如果你对一段文字指定 1em,那么表现出来的就是 16px 大小,2em 就是 32px 大小。相对大小单位有很广泛的用途,由于它的相对性,所以对跨平台跨设备的字体大小处理上有得天独厚的优势,同时对于响应式的布局设计也有很大的帮助。但是缺点很明显,你无法直观的看到大小,而且对于不同的大小,你需要精确的计算。

字体实际表现出来的大小

上面只是说了两种形容字体大小的单位,但实际上表现出来的字体大小,并非简单的单位前面的数值。除了数值之外,潜行者 m 个人认为还跟 设备视距 有关。

设备就是指显示设备的分辨率及屏幕大小,跟前面解释 px 单位的相对性相同,如果在一块非常大的分辨率非常低的屏幕(像广场电子屏),即使很小的像素,也会展示出很大的字。这也就是为什么早期的 800x600 像素横行的时候,大家都是用 12px 大小的原因。因为显示的文字已经够大了。

视距就是指浏览者看文字的距离。很明显的道理,眼睛距离屏幕越远,看起来上面的文字就变小了。

所以在选择网页中字体大小的时候,还需要考虑你的用户的实际使用习惯。同一个网页,在笔记本上和在手机上使用的时候,字体大小就不应该相同,因为电脑屏幕大分辨率高,而且视距通常比较近而且固定,手机等屏幕小分辨率较低,视距更近(大家都喜欢躺着或者趴着玩手机啦),所以这些都要考虑,才能得到一个合理的大小。

为什么是偶数字体大小

通过上面的单位介绍,对于 px 单位中,我举得例子都是 12px、14px、16px、18px 等等,为啥不是 11px、15px?这涉及到一个锯齿的问题,特别是在早期的显示器中,往往不能很好的处理文字的锯齿问题,而使用单数的像素,极有可能造成锯齿,所以默认的通常使用偶数大小。

字体的颜色选择

字体的颜色选择同样是一个重要的细节,但是涉及到配色了,已经超出本文要讨论的范围,所以在这里,我只好简单的说一下有关网页中字体颜色的禁忌。

字体的颜色要朴素、正常

什么叫朴素正常?通常来说,文章都是白底黑字,黑色的。所以网页中的文字,通常使用黑色,或者浅灰色,这样更加符合大众的口味。如果不是一些很有创意的设计,请不要随便的使用颜色。就像 我爱水煮鱼 博客里面的一篇文章

如果我为它加上蓝色,你会怎么想?

颜色要与背景有一定的对比度

低对比度,容易导致字体看不清楚。所以要用高对比度的颜色,例如白底黑字,黑底白字等。不信看下图:

如果你在看一篇文章,字体的颜色是上图中,最下面的那个,你还会再看下去吗?

避免特殊颜色

这里要避免的一些特殊颜色,是指网页中的一些默认颜色。特别是蓝色,因为蓝色代表着网页中的超链接,如果网页中有一段蓝色的文字,会让人误以为是可以点击的超链接。所以这种颜色要尽量避免。但是有些时候在设计中,必须要用到这种颜色的设计,所以也有一些其他的方法来解决这个问题。

例如潜行者 m 博客的 Qetro 主题,采用了蓝色调,在正文排版布局的时候思考过关于加粗文字的样式。如果使用常规的粗体黑色来说,较多的加粗内容,会导致页面文字的混乱。加粗的目的是为了醒目,告诉浏览者这是段重要的文字。所以我对文字添加蓝色处理。但是这个蓝色恰巧就跟超链接的默认样式颜色相同。非常容易让人迷惑,于是我将超链接的样式带有默认的下划线。

当用户看到蓝色的时候,可能会试图放在上面看一下,结果无法点击也没有变成手指。再往下拉,看到超链接的时候,一眼就可以看出下划线是可以点击的超链接。这也是一种还不错的折中方法。

与字体有关的 CSS 属性

与字体有关的 CSS 属性,通常有以下几个:font-family、font-style、font-weight、font-size、line-height、letter-spacing、word-spacing、text-align、text-decoration。

font-family:用于定义字体,上面有演示不多说。更详细的资料请看:font-family

font-style:用于定义字体的样式,包括正常、斜体、倾斜等,对应的属性值为:normal - 文本正常显示、italic - 文本斜体显示、oblique - 文本倾斜显示。

font-weight:用于定义文字的粗细,详细的属性值请看:font-weight。

font-size:设置字体大小,不再赘述。

line-height:用于设置文字中的行间距,合适的行间距对用户阅读带来良好体验。同时还可以用于垂直布局单行文字。

letter-spacing:设置文字之间的字间距,使文字之间的距离增大或者减小。

word-spacing:用于调整单词的间距。

text-align:用来对齐文字,例如左对齐、右对齐、居中对齐等。

text-decoration:用来修饰一段文本,例如添加下划线等。常对 a 标签使用这个属性消除其默认的下划线。

上面是与字体相关,比较常用的 CSS 属性,还有其他更加具体的,可以参考网上的资料,推荐 W3school 上面的有关字体的资料。

使用在线字体

在 CSS3 中,引入了一个非常强大而且实用的功能来面对上面的字体选择问题。传统的字体选择,要你的操作系统中安装相应字体才可以显示。如果你在网页作品中,使用了其他的创意字体,那么你需要生成相应的文字图片来替换,否则不会显示。CSS3 中的这个功能,就是 Web Fonts,网页中可以使用安装在服务器端的字体。你可以将选择好的字体,上传到服务器中,然后使用 CSS3 新增的 @font-face 属性,来调用服务器上的字体,然后来渲染网页。

支持 CSS3 这一功能的浏览器,会首先找到服务器上的字体,然后下载下来进行渲染。这样就彻底解决了本地操作系统中,没有对应字体的问题。关于 @font-face 的具体使用方法,由于比较多,在本文不再赘述,请大家自行百度之:@font-face 的使用方法

既然如此,那么选择的余地就很大了,只需要有字体文件就可以。于是一些人就开始想,我可不可以提供一个在线字体的服务,大家可以直接看到字体的效果,然后获取代码引用这个字体?于是就出现了在线字体,比较有名的有 Google 在线字体

不要高兴的太早了,自定义字体,目前只能应用在英文中。为什么呢?你下载个字体看一下就知道了,通常英文字体只有几百 KB,因为它只需要包含数字、标点、英文字母即可。而中文字体通常十几 M,最小的也要好几 M。因为汉字实在是太多,而且还需要对每个汉字进行设计制作。这样的话,汉字就没法应用了,因为你要打开一个网页,还需要先下载个几 M 的汉字字体,在目前国内的网速是不现实的。

参考和推荐文献

本文部分参考并引用了以下网络资料,同时也推荐以下资料: