文档章节

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

校友君
 校友君
发布于 2014/06/20 23:19
字数 783
阅读 23
收藏 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
[译] 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
《Head first HTML与CSS 第二版》读书笔记 第七章 CSS入门

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

一万
2016/07/31
36
0

没有更多内容

加载失败,请刷新页面

加载更多

aws S3 util demo

package com.example.demo;import com.amazonaws.AmazonClientException;import com.amazonaws.AmazonServiceException;import com.amazonaws.auth.BasicAWSCredentials;import co......

经常把天聊死的胖子
5分钟前
1
0
我们知道CDN护航了双11十年,却不知道背后有那么多故事

摘要: 一路走来,文景也曾疑惑过:为什么我们不能把活动的时间跨度拉长到3天,或者1周呢?那样我们或许就不必冒着如此大的风险,承受日常峰值是10倍以上的压力啊!然而当他走到现在才深刻的...

阿里云官方博客
14分钟前
2
0
linux下查看cpu、memo、io、swap性能数据脚本

直接贴脚本: 1、cpu #!/bin/bashCurrentDate=`date -d today '+%Y%m%d'`CurrentTime=`date -d today '+%Y%m%d%H%M'`mytext="$CurrentTime\t`top -b -n 1 | grep Cpu\(s\......

郑加威
17分钟前
2
0
MySQL之——查询重复记录、删除重复记录方法大全

MySQL之——查询重复记录、删除重复记录方法大全

安小乐
21分钟前
1
0
spring容器启动,停止,关闭事件监听-ApplicationEvent

ApplicationEvent ApplicationEvent相当于一个事件,所有自定义事件都需要继承这个抽象类。在Eclipse中Ctrl+Shift+H调用类的层次结构列表,可以看到如下 Application下抽象子类ApplicationCo...

tantexian
24分钟前
1
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部