摘要：理解字体和文本属性，对于创造出专业水准的网页排版非常重要。为字体和文本分别定义了属性。字体属性主要描述了一类字体的大小和外观。还有一种新增的单位字体样式值示例说明和都表示斜体英文中的斜体主要表示强调。字体粗细可能的值，或者和。
1.网页中字体的来源理解字体和文本属性，对于创造出专业水准的网页排版非常重要。一个网站的品质如何，有时候只要看看它用的字体就能一目了然。
用户机器中安装的字体
保存在第三方网站上的字体（可以用link标签把它们链接到你的页面上）
保存在你的Web服务器上的字体（可以使用@font-face规则随网页一起发送给浏览器）
2.字体和文本的区别 2.1 字体字体是 文字的不同体式 或 字的形体结构。
根据外观，字体可分为不同的类别（font-collection），包括衬线字体（serif）、无衬线字体（sans-serif）和等宽字体（monospace）。每一类字体可以分为不同的字体族（font family），比如 Times 和 Helvetica。而字体族中又可以包含不同的字形（font face），反映了相应字体族基本设计的不同变化。例如 Times Roman、Times Bold、Helvetica Condensed 和 Bodoni italic。
2.2 文本文本就是一组字或字符，比如文章标题、段落正文等等，跟使用什么字体无关。
3. 字体属性 3.1 字体族 font-familyCSS 为字体和文本分别定义了属性。字体属性主要描述了一类字体的大小和外观。比如，用了什么字体族，多大字号，粗体还是斜体。文本属性描述了对文本的处理方式。比如，行高或者字符间距多大，有没有下划线和缩进。
示例：h2 {font-family:times, serif;}
3.2 字体大小 font-size注意：如果一个字体名多于一个单词（有空格），应该加上引号。
例如：body {font-family:"trebuchet ms", tahoma, sans-serif;}
示例：h2 {font-size:18px;}
3.3 字体样式 font-style提示：总的来说，用于设定字体大小的单位有两种，一种是绝对单位，比如像素或点，另一种是相对单位，比如百分比或em。（还有一种CSS3新增的rem单位）
值：italic、oblique、normal
示例：h2 {font-style:italic;}
说明：
italic和oblique都表示斜体；
英文中的斜体主要表示强调。假如你真想表示强调，那在 HTML 标记中直接使用
标签即可，因为它默认就是斜体。
font-style 有一个 normal 值，中文就是常规的意思。 这个值其实不仅 font-style 有，很多其他属性也有，它的作用就是取消所有的特殊样式。这个值是用来有选择地覆盖某个默认或你设定的全局属性的。
3.4 字体粗细 font-weight可能的值：100、 200……900，或者 lighter、 normal、 bold 和 bolder。
示例： a {font-weight:bold;}
说明：粗体的主要作用是表示重要。实际上， HTML 元素 strong 也表示重要，而它的默认
样式就是粗体。
值： small-caps（将所有小写字母变成小型大写字母）、 normal
示例： blockquote {font-variant:small-caps;}
说明：慎用，大写字母不像小写字母那样有上伸部分和下伸部分作为视觉提示，所以全都使用大写字母会增加辨识难度。
示例：
p {font: bold italic small-caps .9em helvetica, arial, sans-serif;}
Here"s a piece of text loaded up with every possible font property.
说明：使用这个简写形式要遵守两条规则，否则浏览器无法正确解释声明的值。
规则一：必须声明 font-size 和 font-family 的值
规则二：所有值必须按如下顺序声明：
font-weight、 font-style、 font-variant 不分先后；
然后是 font-size；
最后是 font-family。
4.文本属性 4.1 文本缩进 text-indent提示：实际上，在设定 font-size 属性的同时，可以顺便设定 line-height（行高）值。也就是说，字体大小和行高的值可以写在一块，比如 12px/1.5。当然， line-height 是
文本属性，下一节我们会讲到它。
值：长度值（正、负均可）
示例：p {text-indent:3em;}
值：任何长度值（正、负值均可）。
示例：p {letter-spacing:.2em;}
值：任何长度值（正、负值均可）。
示例：p {word-spacing:.2em;}
值：underline、overline、line-through、blink、none。
示例：.retailprice {text-decoration:line-through;}
值：left、right、center、justify
示例：p {text-align:right;}
值：任何数字值（不用指定单位）
示例：p {line-height:1.5;}
说明：
CSS中的行高平均分布在一行文本的上方和下方。比如，如果字体大小是12像素，行高是20像素，则浏览器会在文本上方和下方各加4像素的空白，以凑足20像素的行高。
修改默认行高最简单的方式就是使用font快捷属性，以复合值的形式把 font-size 和 font-height 的值写在一起，比如：div#intro {font: 1.2em/1.4 helvetica, arial, sans-serif;} 在上面的一行代码，行高就是字体大小12em的1.4倍。注意这里不用给line-heightz 值指定单位，只要一个数值就可以。
4.7 文本转换 text-transform值：none、uppercase、lowercase、capitalize。
示例：p {text-transform:capitalize;}
说明：capitalize 值会将每个词的首字母装换为大写，这种效果在很多广告、报道、杂志的标题中很常见。
值：任意长度值以及 sub、 super、 top、 middle、 bottom 等。
示例：span {vertical-align:60%;}
说明：
vertical-align 以基线为参照上下移动文本，但这个属性只影响行内元素。
如果想在垂直方向上对齐块级元素，必须把其display属性设定为inline。
该属性较为常用于公式或化学分子式中的上下标，或用于文本中脚注的角标。
HTML 标签和有默认的上标和下标样式，但重新设定一下vertical-align 和 font-size 属性能得到更美观的效果。例如：p.custom {font-size:.8em; vertical-align:1em;}
5. Web 字体5.1 设定Web字体的方式目前，使用 @font-face 规则在网页中嵌入可下载字体的CSS功能，已经得到了浏览器广泛支持。该规则为设计师提供了系统自带的字体以外的广泛选择。换句话说，浏览器可以从Web服务器下载字体，就意味着不必再依赖用户机器中的字体，而且也可以确保用户能够看到CSS中设定的字体。
有以下三种：
使用 Google Web Fonts 或 Adobe 的 Typekit 等公共字体库
使用事先打好包的@font-face 包
使用 Font Squirrel 用你自己的字体生成@font-face 包。
5.2 公共字体库 5.3 打包的 @font-face 包 5.4 生成的 @font-face 包 5.5 文字版式文字版式讲求匀称，一般是由看不见的网格，框定页面文字的走向和布局。匀称的版式可以增强页面的可读性。
参考资料
CSS设计指南
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/110967.html
摘要：在元素中使用元素是一个元素，没有结束标记表示链入的是样式表，在中可省略不写。一般页面中，中文用宋体黑体微软雅黑，英文使用。英文字体要放在最前面，中文字体后面的备选字体用逗号隔开。表示方法可用像素指定或使用或百分数相对于字体大小指定。 一、基础介绍 1， css：cascading style sheet 层叠式样式表2， 语法：p {background-color:red...
摘要：为了解决冲突，确定哪条规则胜出并最终被应用，提供了三种机制继承层叠和特指。整个检查更新过程结束后，再将每个标签以最终设定的样式显示出来。层叠规则四顺序决定权重。规则三设定的样式胜过继承的样式，此时不用考虑特指度即显式设定优先。 为了解决冲突，确定哪条规则胜出并最终被应用，CSS提供了三种机制：继承、层叠和特指。 1.继承 CSS 中的祖先元素会向后代传递一样东西：CSS属性...
摘要：我的邮箱地址欢迎大家交流学习纠错此篇博客是我的复习笔记，和学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开的书略读，后记录了标签，元素，属性的具体意义。有些标记有属性，具体格式，以标记为例，其中为标记的属性。我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错！ 此篇博客是我的复习笔记，html和css学的时间太久了，忘得差不多了，最近要使用一下，所以重新打开htm...
摘要：将内容在边界内换行不截断英文单词换行语法浏览器只在半角空格或连字符的地方进行换行。个人感觉跟类似强行截断英文单词，达到词内换行效果。 CSS3文本 css字体类型属性 font-family, font-style(normal、italic、oblique[倾斜]), font-weight, font-size-adjust(定义是否强制对文本使用同一尺寸,仅火狐支持), font...
摘要：在动画过程中，您能够多次改变这套样式。以百分比来规定改变发生的时间，或者通过关键词和，等价于和。为了获得最佳的浏览器支持，您应该始终定义和选择器。注释请使用动画属性来控制动画的外观，同时将动画与选择器绑定。CSS3 被划分为模块 其中最重要的 CSS3 新增实用模块包括： 背景和边框 文本效果 2D/3D 转换 动画 多列布局 用户界面 CSS3 边框: 用于创建圆角 border...
阅读 1849·2023-04-25 19:51
阅读 1147·2021-11-15 11:43
阅读 4480·2021-11-02 14:40
阅读 1971·2021-10-11 10:59
阅读 1312·2021-09-22 15:05
阅读 1004·2021-09-09 09:32
阅读 616·2019-08-30 15:56
阅读 526·2019-08-30 15:52
