文档章节

css文本字体的选择(font-family)

校友君
 校友君
发布于 2014/06/20 23:19
字数 783
阅读 22
收藏 0

首先来个例子:font-family: Arial, Helvetica, sans-serif;

本例中,web浏览器会先看看是否安装了 Arial 字体。如果安装了,那么就用这种字体;如果没有安装,浏览器就会继续寻找 Helvetica 字体;如果还是没有找到,最后它就会指定一种通用的字体——sans-serif。当你指定一种通用的字体样式(如 sans-serif 或 serif)时,访问者的浏览器就会选择那种字体。但你至少可以预知它的基本特征。

如果字体的名称中包含多个单词,则必须用双引号("")将它们括起来,如:

    font-family: "Times New Roman", Times, serif;

以下是一些常用的字体类型组合,每一列的最后都包含一种通用的字体。

Serif 字体

Serif 字体 最适用于冗长的文字信息,因为大家都觉得这种字体使字母主笔划的结尾处会有一些细小的“足”,能够比较有效地引导人们的视线从一个字母移到下一个字母,阅读起来感觉更加轻松。serif 字体包括:Times、Times New Roman、Georgia;

"Times New Roman", Times,serif

Georgia, "Times New Roman", Times, serif

Baskerville, "Palatino Linotype", Times, serif

"Hoefler Text", Garamond, Times, serif

大家可以自行测试下,很简单的。另,字体在windows系统和Mac系统上显示时并不会一模一样。这两个系统带有不同的内建字体。此外消除锯齿的功能(使屏幕上的文字看起来更加光滑)在Mac系统上的效果比在Windows上更好一些。如果你用的是win系统,又希望在自己机上显示出来的字体更好看一些,可以启用Microsoft的ClearType 技术,详情见:www.microsoft.com/typography/cleartype

Sans-serif 字体

Sans-serif 字体 看起来干净而简洁,所以经常被用在标题上。Sans-serif 字体包括: Arial、Helvetica、Verdana、和 Formata;

Arial, Helvetica, sans-serif

Verdana, Arial, Helvetica,sans-serif

Geneva, Arial, Helvetica, sans-serif

Tahoma, "Lucida Grande", Arial, sans-serif

"Trebuchet MS", Arial, Helvetica, sans-serif

"Century Gothic", "Gill Sans", Arial, sans-serif

Monospaced 字体

Monospaced (等宽)字体 经常用于显示计算机代码。Monospaced字体中的每个字母都是等宽的(打字机一般是用这种字体将数据成整齐的列)。

"Courier New", Courier, monospace

"Lucida Console", Monaco, monospace

"Copperplate Light", "Coppenrplate Gothic Light", serif

"Marker Felt", "Comic Sans MS", fantasy

其他字体

从理论上讲,字体种类有成千上万种,并且每一种操作系统自带的字体还不在此列。但是下面这些字体在Mac和PC上都十分常用,因此需要特别留意:

Arial Black

Arial Narrow

Impact

要特别注意 Arial Black 和 Impact 字体,它们只有一种形式,没有斜体。因此,在使用这些字体时,一定要将 font-weight 和 fonr-style 设置为 normal。否则,如果将文本设置为粗体或斜体,浏览器就会绞尽脑汁去猜测这些文字应该是什么样子。

另:www.codestyle.org/css/font-family 网站上可以找到更多关于哪些操作系统上装有哪些字体的信息,包括 Mac、Windows 和 Linux 系统。

© 著作权归作者所有

共有 人打赏支持
校友君
粉丝 3
博文 5
码字总数 5151
作品 0
广州
字体和文本

字体 网页中的字体有三个来源。 1、用户机器中安装的字体。(直到最近,这些字体还是能在网页中放心使用的唯一一批字体。) 2、保存在第三方网站上的字体。最常见的是 Typekit 和 Google,可...

风吹一米阳光
2015/09/29
21
0
Java程序员从笨鸟到菜鸟之(十六)CSS基础积累总结(上)

一:CSS的工作原理 1.基本的CSS语法 比方说,我们要用红色作为网页的背景色: 用HTML的话,我们可以这样: 用CSS的话,我们可以这样获得同样的效果: body {background-color: #FF0000;} 上例...

长平狐
2012/11/12
57
0
CSS 文本样式[上]

字体总汇 字体设置 Web字体 通过文本样式的设置,更改字体的大小、样式以及文本的方位。 一、字体总汇 CSS文本样式表如下: 二、字体设置 我们可以通过CSS文本样式来修改字体的大小、样式以及...

xiaoxiaobukuang
2017/10/26
0
0
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

CSS由规则组成,每个规则为选择的HTML元素提供样式。 典型的规则包括一个选择器以及一个或多个属性和值。 选择器指定 规则将应用到哪些元素。 每个属性声明以一个分号结束。 规则中所有属性和...

一万
2016/07/31
36
0
[译] Font-size:一个意外复杂的 CSS 属性

原文地址:Font-size: An Unexpectedly Complex CSS Property 原文作者:Manish Goregaokar 译文出自:掘金翻译计划 本文永久链接:github.com/xitu/gold-m… 译者:zephyrJS 校对者:bambo...

font size is 16px
06/02
0
0

没有更多内容

加载失败,请刷新页面

加载更多

你为什么在Redis里读到了本应过期的数据

一个事故的故事 晚上睡的正香突然被电话吵醒,对面是开发焦急的声音:我们的程序在访问redis的时候读到了本应过期的key导致整个业务逻辑出了问题,需要马上解决。 看到这里你可能会想:这是不...

IT--小哥
今天
2
0
祝大家节日快乐,阖家幸福! centos GnuTLS 漏洞

yum update -y gnutls 修复了GnuTLS 漏洞。更新到最新 gnutls.x86_64 0:2.12.23-22.el6 版本

yizhichao
昨天
5
0
Scrapy 1.5.0之选择器

构造选择器 Scrapy选择器是通过文本(Text)或 TextResponse 对象构造的 Selector 类的实例。 它根据输入类型自动选择最佳的解析规则(XML vs HTML): >>> from scrapy.selector import Sele...

Eappo_Geng
昨天
4
0
Windows下Git多账号配置,同一电脑多个ssh-key的管理

Windows下Git多账号配置,同一电脑多个ssh-key的管理   这一篇文章是对上一篇文章《Git-TortoiseGit完整配置流程》的拓展,所以需要对上一篇文章有所了解,当然直接往下看也可以,其中也有...

morpheusWB
昨天
5
0
中秋快乐!!!

HiBlock
昨天
3
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部