CSS中的字体和文本

网页设计 everyinch 5426℃ 0评论

一、字体

  • 用户机器中安装的字体。
  • 保存在第三方网站上的字体。最常见的是Typekit 和Google，可以使用link 标签把它们链接到你的页面上。
  • 保存在你的Web 服务器上的字体。这些字体可以使用@font-face 规则随网页一起发送给浏览器。

与字体样式相关的6 个属性。

  • font-family
  • font-size
  • font-style
  • font-weight
  • font-variant
  • font（简写属性）

有哪些通用的字体类呢？有以下5 种：

  • serif，也就是衬线字体，在每个字符笔画的末端会有一些装饰线；
  • sans-serif，也就是无衬线字体，字符笔画的末端没有装饰线；
  • monospace，也就是等宽字体，顾名思义，就是每个字符的宽度相等（也称代码体）；
  • cursive，也就是草书体或手写体；
  • fantasy，不能归入其他类别的字体（一般都是奇形怪状的字体）。

二、文本属性

以下是几个最有用的CSS 文本属性：

  • text-indent
  • letter-spacing
  • word-spacing
  • text-decoration
  • text-align
  • line-height
  • text-transform
  • vertical-align

text-indent：

ch4_textIndent

letter-spacing：

ch4_letterSpacing

word-spacing：

ch4_wordSpacing

text-decoration：

ch4_textDecoration

text-align：

ch4_textAlign

line-height：

ch4_lineHeight

text-transform：

ch4_textTransform

vertical-align：

ch4_verticleAlign

p.custom sub {font-size:60%; vertical-align:-.4em;}
p.custom sup {font-size:65%; vertical-align:.65em;}
p.customsmall {font-size:.8em; vertical-align:1em;}

三、Web字体

@font-face 规则为设计师提供了系统自带字体以外的广泛选择。换句话说，浏览器可以从Web 服务器下载字体，就意味着不必再依赖用户机器中的字体，而且也可以确保用户能够看到CSS 中设定的字体。

设定Web 字体的方式有以下三种。

  • 使用Google Web Fonts 或Adobe 的Typekit 等公共字体库。
  • 使用事先打好包的@font-face 包。
  • 使用Font Squirrel 用你自己的字体生成@font-face 包。

 

1. 公共字体库

打开http://www.google.com/webfonts，找到想要的字体，单击Add to Collection 按钮，然后单击页面底部的Use 按钮。然后，Google 就会生成一个指向你刚刚选定字体的<link>标签，直接把它复制粘贴到你的HTML 文件中即可。

<link href='http://fonts.googleapis.com/css?family=Anton|Niconne|Prata'rel='stylesheet' type='text/css'>

把这个链接添加到页面的<head>标签中之后，就可以像使用其他字体一样使用这些Web 字体了。用户打开网页时，浏览器就会从Google 的服务器得到相应字体。比如

h3 {font: 20px "Prata", serif;}

2. 打包的@font-face包

@font-face {
/*这就是将来在字体栈中引用的字体族的名字*/
font-family:'UbuntuTitlingBold';
src: url('UbuntuTitling-Bold-webfont.eot');
src: url('UbuntuTitling-Bold-webfont.eot?#iefix')
format('embedded-opentype'),
url('UbuntuTitling-Bold-webfont.woff')
format('woff'),
url('UbuntuTitling-Bold-webfont.ttf')
format('truetype'),
url('UbuntuTitling-Bold-webfont.
svg#UbuntuTitlingBold') format('svg');
font-weight: normal;
font-style: normal;
}

把以上代码添加到网页中之后，就可以使用font-family 以常规方式引用该字体了。引用字体时要使用@font-face 规则中font-family 属性的值作为字体族的名字。

四、文字版式

1. 简单的文本布局

<article>
	<h1>CSS</h1>
	<p>CSS stands for Cascading Style Sheets. CSS controls the presentational aspects of your Web pages.</p>
	<h2>Block-Level Elements</h2>
	<p>Block-level elements stack down the page. They include:</p>
	<ul>
		<li><code>header</code></li>
		<li><code>section</code></li>
		<li><code>h1, h2, etc.</code></li>
	</ul>
	<h2>Inline Elements</h2>
	<p>Inline elements sit next to each other, if there is room. They include:</p>
	<ul>
		<li><code>img</code></li>
		<li><code>a</code></li>
		<li><code>em</code></li>
	</ul>
	<blockquote>
		<q>Typography maketh the Web site.</q><cite>CWS</cite>
	</blockquote>
</article>

ch4_textlayout1

/*删除所有元素的外边距*/
* {margin:0; padding:0;}
/*设定主字体族和字体大小*/
body {font:1.0em helvetica, arial, sans-serif;}
/*居中显示盒子*/
article {width:500px; margin:20px auto; padding:20px; border:2px solid #999;}

ch4_textlayout2

接下来，需要巧妙地安排一下元素间的垂直距离。另外，去掉默认外边距后列表项目的符号也跑到了外面，这里一块儿修复。

/*标题周围的空白*/
h1, h2, h3, h4, h5, h6 {line-height:1.15em; margin-bottom:.1em;}
/*文本元素周围的空白*/
p, ul, blockquote {line-height:1.15em; margin-bottom:.75em;}
/*缩进列表*/
ul {margin-left:32px;}

ch4_textlayout3

最后，让各级标题也更均衡一些，保证较大的标题突出，最小的标题也不至于不明显，同时也增大了code 元素的字体。

/*调整标题文本*/
h1 {font-size:1.9em;}
h2 {font-size:1.6em;}
h3 {font-size:1.4em;}
h4 {font-size:1.2em;}
h5 {font-size:1em;}
h6 {font-size:.9em;}
/*调整段落文本*/
p {font-size:.9em;}
/*调整代码文本（默认值太小了）*/
code {font-size:1.3em;}

ch4_textlayout4

2. 基于网格排版

使用Adobe Fireworks创建了一个100×18 像素的矩形，并在它的底部画了一条灰线。然后将其保存为.png 格式，并命名为grid_18px.png

把这张图片放到body 元素的背景上：

/*添加网格线*/
body {background-image:url(images/grid_18px.png);}

ch4_textGrid1

这个例子包含如下所示的简单段落：

<p>In traditional typography, text is composed…</p>
CSS 规则如下：
/*去掉所有元素的内边距和外边距*/
* {margin:0; padding:0;}
body {
	/*添加网格背景*/
	background-image:url(images/grid_18px.png);
	/*设定字体*/
	font:100% helvetica, arial, sans-serif;
	/*加宽左右外边距，得到一栏的雏形*/
	margin:0 40px 0;
}
p {
	/*设定字体大小*/
	font-size:13px;
	/*将行高设定为等于网格高*/
	line-height:18px;
}

ch4_textGrid2

再给容器body 元素添加4 像素的内边距，以便把元素向下推到文本基线与网格对齐的位置。只要让第一个元素与网格对齐，其他元素就都能对齐了。实际上，给body上方添加了22 像素（4+18）的内边距，以便上方能有一定的空间：通过margin-bottom在每个段落之间加上一个空行：

padding-top:22px;

之后，给段落添加一条声明：

p {
/*设定字体大小*/
font-size:13px;
/*把行高设定为等于网格高度*/
line-height:18px;
margin-bottom:18px;
}

ch4_textGrid3

现在增加一个h3的标签：

<p>In traditional typography, text is composed…</p>
<h3>Type for Every Use</h3>
<p>The ubiquity of type has led typographers…</p>

针对这个标题的CSS 规则如下：

h3 {font-size:18px; line-height:18px;}

ch4_textGrid4

标题的基线比网格低几个像素，需要做一些调整：

h3 {
	font-size:18px;
	line-height:18px;
	margin-top:-2px;
	margin-bottom:2px;
}

ch4_textGrid5

通过类似的技巧对齐比网格高的元素，比如h1

<h1>Typography</h1>
<p>In traditional typography…</p>

当前给它设定的CSS 如下：

h1 {font-size:24px; line-height:36px;}

ch4_textGrid7

h1 {
	font-size:24px;
	line-height:36px;
	margin-top:-13px;
	margin-bottom:13px;
}

ch4_textGrid7

在这个练习最后，我们再加几个不同字体大小的标题、一个无序列表和一个blockquote 元素。看一看把网格去掉之后页面是什么样子。

* {margin:0; padding:0;}
body {font:100% helvetica, arial, sans-serif; backgroundimage:
url(images/grid_18px.png); margin:0 20px 0; padding:21px;}
p {font-size:14px; line-height:18px; margin-bottom:18px;}
h1 {font-size:24px; line-height:36px; margin-top:-13px; margin-bottom:13px;}
h2 {font-size:18px; line-height:18px; margin-top:-2px; margin-bottom:2px;}
h3 {font-size:16px; line-height:18px; margin-top:-2px; margin-bottom:2px;}
ul {margin-bottom:18px;}
li {font-size:13px; list-style-type:none; padding:0 20px; line-height:18px;}
a {color:#777; text-decoration:none;}
blockquote {font-size:12px; line-height:18px; paddingtop: 2px; margin-bottom:16px;}

ch4_textGrid8

分享&收藏

转载请注明：陈童的博客 » CSS中的字体和文本

喜欢 (0)
发表我的评论
取消评论

表情

Hi，您需要填写昵称和邮箱！

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址
'; } if( dopt('d_footcode_b') ) echo dopt('d_footcode'); ?>