字体和颜色样式 - zilongxuan001/LearnFreecode GitHub Wiki

回主目录

主要内容

字体

  • 定制页面中使用的字体是什么属性？ font-family

  • 控制字体大小的是什么属性？ font-size

  • 设置文本颜色的是什么属性？ color

  • 影响字体的粗细的是什么属性？都有哪些值？ 属性：font-weight
    值： lighter normal bold bolder

  • 为文本增加更多风格的是什么属性？都有哪些值？ 属性：text-decoration
    值： none underline overline line-through

来源：《Head First HTML 与 CSS》(中文第二版)P312-313

字体系列是什么？

  • font-family共有几个字体系列？
  • 这些都叫什么名字？有什么特点？

字体系列共有5个系列: sans-serif，serif，monospace，cursive，fantansy

sans-serif字体系列

Verdana
Arial Black
Trebuchet  MS
Arial
Geneva

非衬线体，被认为更适合在屏幕上显示。

serif字体系列

Times   
Times New Roman
Georgia

包括有衬线的字体。所谓衬线，就是字母末端的装饰性“小细线”

Monospace字体系列

Curier
Courier New
Andale  Mono

包含固定宽度的字符，如“i”可以和“m”同样宽度，猪样用于显示软件代码示例

Cursive字体系列

Comic Sans
Apple Chancery

包括看似手写的字体，可以用与标题

Fantasy字体系列

Last
NINJA
Impact

包含有某种风格的装饰字体

来源：《Head First HTML 与 CSS》(中文第二版)P314-315

如何在CSS中使用字体系列

  • 规范的字体系列使用格式是什么？
  • 如果字体名包含多个单词（就是单词间有空格），怎么指定该字体？
  • 如何处理多个操作系统显示的字体（比如windows，Mac, Linux 或移动设备）？

字体格式

字体属性font-family实际上是一个字体优选先列表。

font-family: 首先使用的字体, 同一系列的候选字体1, 同一系列的候选字体2,  ...,  通用的字体系列名”；

注意最后一个是字体系列名。

image

字体名含有多个单词，则用括号括起来。如font-family:"Courier New";

如何处理多个操作系统的字体？将多个操作系统所默认的字体逐一列出。

image image

来源：《Head First HTML 与 CSS》(中文第二版)P319-321

Web字体

  • 使用什么规则可以向用户浏览器提供自己定义的字体的名字和位置？
  • Web字体如何工作？Web字体的文件扩展名是什么？
  • 如何为页面增加Web字体？
  • 常用的字体格式都有哪些？特点是什么？扩展名是什么？
  • 哪些网站可以托管Web字体？

@font-face规则

使用@font-face规则，可以向用户浏览器提供自己定义的字体的名字和位置

Web字体工作方式：

  1. 浏览器接收页面
  2. 浏览器发现需要某种字体，向服务器请求
  3. 服务器收到请求，找到字体文件，发给浏览器。、
  4. 浏览器限制

Web字体扩展名是.woff woff，即Web open font format，Web开放字体格式

为页面增加Web字体步骤：

1.找到一个字体。比如字体网站。 2. 确保有所需字体的所有格式。 找一个候选字体，可以在老浏览器上显示。 3. 把你的字体文件放到Web上。可以到google上免费托管这些字体。 4. 在CSS文件中增加@font-face属性，放到.css页面最上方。 5. 在CSS文件中使用font-family名。那个元素想使用该字体，就可以在.css中直接使用。 6. 加载测试。

常用字体格式

image

托管Web字体网站

FontSquirrel (https://www.fontsquirrel.com/)，很多字体开源免费，可以下载，传到自己的服务器 Google Web字体服务(https://fonts.google.com/)，只要连接你想要的字体就行

来源：《Head First HTML 与 CSS》(中文第二版)P321-324，327

@font-face

  • @font-face的形式是什么样的？

  • @font-face有什么缺点？

  • CSS都有哪些内置规则？

“@font-face”格式如下

@font-face {
        font-family: "字体名称";
        src:  url("链接地址"),
               url("链接地址")；
}

image

@font-face缺点

@font-face加载速度慢，会影响读者体验。

管理多个字体文件比较麻烦 移动设备和小型设备不支持Web字体

CSS内置规则

@font-face 获取一个Web字体 @import 导入其他CSS文件 @media 创建特定于某些“媒体”类型的CSS规则，如印刷页，桌面屏幕或手机

来源：《Head First HTML 与 CSS》(中文第二版)P326-327

调整字体大小

  • 调整字体有哪4种方法？格式是什么样的？
  • 指定字体大小的秘诀是什么？
  • 推荐的body和标题字体的默认大小是多少像素？

调整字体大小四法

1. 像素法

font-size: 14px

数字和px之间不能有空格 14px就是指字母的最低部分与最高部分之间有14像素

2. 百分比法

font-size: 120% 百分比是相对父元素字体的大小

3. 倍数法

font-size: 1.2em
1.2em就是1.2倍，相对父元素字体的大小

4.关键字法

font-size: medium 关键字xx-small，x-small，samll，medium，``large ，x-large`，`xx-larger`

指定字体大小的秘诀

1.选择一个关键字（推荐small或medium），指定它作为body元素字体的大小，相当于页面的默认字体大小 2.使用em或百分数，相对于body字体大小制定其他元素的字体大小

为什么直接使用像素法？

  • 浏览器不同
  • 操作系统不同
  • 如果要改变字体大小，比较麻烦

body和标题字体的默认大小推荐值

浏览器默认的body字体的默认大小是16像素

标题的默认比例 h1 200% h2 150% h3 120% h4 100% h5 90% h6 60% 来源：《Head First HTML 与 CSS》(中文第二版)P328，330， 334

改变字体粗细

哪两种方法可以设置字体粗细？

1.关键字法

这种方法常用 font-weight: bold 字体变粗 font-weight: normal 不想继承父元素的变粗样式，就使用normal恢复正常

2.数字法

很多浏览器不吃，不常用。 为font-weight设置100到900的一个数（100，200，300，400，500，600，700，800，900） font-weight: 500;

来源：《Head First HTML 与 CSS》(中文第二版)P335

增加字体风格

  • 有哪两种字体风格？
  • 为什么不用<em>来实现倾斜样式？

设置的字体两种风格

  1. 斜体风格 font-style: itlac; font-sytle: normal; 不想继承父元素的斜体时使用

2.倾斜文本 font-style: oblique; font-style: normal; 不想继承父元素的倾斜文本时使用

斜体风格和倾斜文本都能让字体向右倾斜，不过斜体风格还能让衬线弯曲。 因为浏览器原因，两种风格区别并不大，可以任意使用。

<em>和倾斜风格

<em>是用来显示HTML结构的，表示文字需要强调，不是为了显示 HTML样式的。 而且，<em>的样式可以改变。 来源：《Head First HTML 与 CSS》(中文第二版)P337-338

字体颜色

  • 页面上哪些地方可以加颜色？
  • Web颜色如何工作？
  • CSS中描述颜色的方法有哪些？
  • 十六进制如何表示颜色？
  • Web安全颜色是什么？
  • 查找和制定颜色的方法是什么？
  • 如何搭配合理的字体颜色？

HTML使用颜色的地方

HTML页面可以有文本颜色、背景色、边框色 color实际是元素的前景色，控制文本颜色和边框颜色 border-color 指定边框颜色 background-color 背景色

Web颜色工作方法

Web颜色使用红绿蓝颜色理论 每种颜色值为0-255，三色都为255，则相交处为白色； 三色均为0，则相交处为黑色。三者按比例混合，组成Web颜色。

CSS描述颜色的方法

1. rgb数字

color: rgb(256, 0, 120); background-color: rgb(201, 102, 0); 数字在0到255之间。

2.rgb百分比

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

3. 关键词法

color: red; backgound-color: silver; 共约有150种颜色，颜色名称不区别大小写 Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Sliver Teal White Yellow

4.十六进制法

最为常用的制定颜色的方法

十六进制， hexadecimal ，简写为'hex' color: #ef4506; color: #fe2; 每两位数相同，则可以缩写

十六进制表示颜色

十六进制码分解为十进制，如color: #ef1201，则分为``ef，12`和`01`，分别计算。 `ef` e对应14，f 对应15, 则14x16+15=224+15=239 `12` 1x16+2=18 `01` 0x16+1=1

则颜色为color: rgb(239, 18, 1);

查找和制定颜色

查找和制定颜色可以通过颜色表， 网站https://en.wikipedia.org/wiki/Web_colors#CSS_colors 搜索HTML color charts

Web安全颜色

Web安全颜色是因为以前的浏览器版本老旧，无法识别太多颜色，所以要有设置颜色的范围。现在随着技术进步，已经不需要Web安全颜色了。

字体颜色搭配

文本和背景要用对比度最大的颜色 深颜色和浅颜色搭配，比如黑对白（黑字白底） 文本用深色，背景使用浅色

来源：《Head First HTML 与 CSS》(中文第二版)P340-349

文本装饰

  • 文本装饰都有哪些属性效果？
  • 如何同时添加多个文本装饰？
  • 如果不想要父元素的装饰，怎么办？

装饰效果

文本装饰有上划线，下划线，删除线 text-decoration: line-throgh; 删除线

text-decoration: underline 下划线

text-decoration: overline 上划线

多个文本装饰

text-decoration: underline overline; 同时有上划线和下划线

不想继承父元素的文本装饰

如果不想要父元素的装饰，则格式为text-decoration: none;

来源：《Head First HTML 与 CSS》(中文第二版)P353

<delete>和<ins>

标记要删除内容的元素是哪个？ <delete>

举例 <del>共创食安郑州</del> image

标记要插入内容的元素是哪个？ <ins>

举例 <ins>同享健康生活</ins> image

来源：《Head First HTML 与 CSS》(中文第二版)P353

字体的简写

字体简写涵盖font-family，font-style，font-weight，font-size，font-variant，line-weight 形式如下

image

举例 font: small/1.6em Verdanan, Helvetica, Arial, sans-serif;

small是font-size; 1.6em是line-height; Verdanan, Helvetica, Arial, sans-serif是font-family。

查找属性性或属性语法的参考手册： Eric Meyer 《CSS Pocket Reference》

来源：《Head First HTML 与 CSS》(中文第二版)P444-445;

| Wiki Home | Code | Issue |Projects |FreeCodeCamp|CodePen |Head First HTML& CSS |Responsive Web Design Certification (300 hours)

⚠️ **GitHub.com Fallback** ⚠️