侧边栏壁纸
博主头像
落叶人生博主等级

走进秋风,寻找秋天的落叶

  • 累计撰写 130562 篇文章
  • 累计创建 28 个标签
  • 累计收到 9 条评论
标签搜索

目 录CONTENT

文章目录

《Head first HTML与CSS 第二版》读书笔记 第八章 文字样式

2024-05-07 星期二 / 0 评论 / 0 点赞 / 54 阅读 / 3541 字

1、font-family: 每个font-family包含一组有共同特征的字体。共有五个字体系列: serif字体系列包含有衬线的字体。多用于新闻报纸的文字排版; sans-serif字体系列

1、font-family:

每个font-family包含一组有共同特征的字体。共有五个字体系列:

  1. serif字体系列包含有衬线的字体。多用于新闻报纸的文字排版;
  2. sans-serif字体系列包含没有衬线的字体。与serif字体相比,它在计算机屏幕上更易识别;
  3. monospace系列包含固定宽度的字符;
  4. cursive系统包含类似手写的字体;
  5. fantasy系列包含有某种风格的装饰字体。

可以给font-family指定多个字体,用逗号分隔这些字体。最后通常放一个字体系列名,如果前面指定的字体依次都未找到,就使用浏览器默认的系列字体。

可以使用Web字体向用户提供一种字体。Web字体的标准格式是Woff,全称是Web开发字体格式(Web open font format)。可以把它们放在服务器上,或者使用一个托管服务,如Google的字体托管服务。@font-face规则定义Web字体,例如:

@font-face{	font-family: "Emblema One";	src: url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.woff"),	     url("http://wickedlysmart.com/hfhtmlcss/chapter8/journal/EmblemaOne-Regular.tff");}

www.fontsquirrel.com提供了很多开源的字体。

 

2、font-size:

可以按像素指定字体大小,其实是告诉浏览器字母高度是多少像素;

可以用百分比指定字体大小,百分比是相对于父元素的;

可以用比例因子em指定字体大小,也是相对于父元素;

用关键字指定字体大写:xx-small/x-small/small/medium/large/x-large/xx-large。相邻大的比小的大20%,small一般是12px。

作者推荐的做法:

  1. 用关键字指定body中的字体大小;
  2. 使用em或百分比指定其他元素的大小。

在大多数情况下默认body字体大小是16px,<h1>是body的200%,<h2>150%,<h3>120%,<h4>100%,<h5>90%,<h6>60%。

如果为body指定em或百分比,则是相对于默认大小的。

3、font-weight:

字体粗细:lighter/normal/bold/bolder,通常bolder和lighter肉眼看不出效果。

4、font-style:

italic——斜体,除文字倾斜外,还有文字的风格有些变化;

oblique——倾斜文字。

对大多数浏览器,两个效果相同。

5、color

Web颜色按红、绿、蓝三个分量所占数量给定。

(1)用名字指定颜色,不区分大小写;

(2)用红、绿、蓝百分比或0~255的数:

background-color: rgb(80%, 40%, 0%);

background-color: rgb(204, 102, 0);

数字/255就是百分比。

(3)用十六进制码指定颜色

每组两位数字分别代表颜色的红、绿、蓝分享的0到255的数。

color属性不仅控制文本颜色,还控制边框颜色(即控制元素前景色)。border-color单独控制边框颜色。

6、text-decoration:

none/underline/overline/line-through:

没效果/下划线/上划线/删除线。

如果对同一个元素的两个不同规则中一个指定了上划线,另一个指定下划线,它们不会叠加,如果想要叠加必须在同一规则中指定。

<del>元素标记要删除的内容;

<ins>元素标记插入的内容。

广告 广告

评论区