Closed zilongxuan001 closed 6 years ago
字体系列共有5个系列: sans-serif
,serif
,monospace
,cursive
,fantansy
Verdana
Arial Black
Trebuchet MS
Arial
Geneva
非衬线体,被认为更适合在屏幕上显示。
Times
Times New Roman
Georgia
包括有衬线的字体。所谓衬线,就是字母末端的装饰性“小细线”
Curier
Courier New
Andale Mono
包含固定宽度的字符,如“i”可以和“m”同样宽度,猪样用于显示软件代码示例
Comic Sans
Apple Chancery
包括看似手写的字体,可以用与标题
Last
NINJA
Impact
包含有某种风格的装饰字体
来源:《Head First HTML 与 CSS》(中文第二版)P314-315
字体格式
字体属性
font-family
实际上是一个字体优选先列表。font-family: 首先使用的字体, 同一系列的候选字体1, 同一系列的候选字体2, ..., 通用的字体系列名”;
注意最后一个是字体系列名。
字体名含有多个单词,则用括号括起来。如font-family:"Courier New";
如何处理多个操作系统的字体?将多个操作系统所默认的字体逐一列出。
来源:《Head First HTML 与 CSS》(中文第二版)P319-321
@font-face
规则使用@font-face
规则,可以向用户浏览器提供自己定义的字体的名字和位置
Web字体扩展名是.woff
woff,即Web open font format,Web开放字体格式
1.找到一个字体。比如字体网站。
- 确保有所需字体的所有格式。 找一个候选字体,可以在老浏览器上显示。
- 把你的字体文件放到Web上。可以到google上免费托管这些字体。
- 在CSS文件中增加
@font-face
属性,放到.css
页面最上方。- 在CSS文件中使用
font-family
名。那个元素想使用该字体,就可以在.css
中直接使用。- 加载测试。
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-family: "字体名称";
src: url("链接地址"),
url("链接地址");
}
@font-face
缺点@font-face
加载速度慢,会影响读者体验。
管理多个字体文件比较麻烦 移动设备和小型设备不支持Web字体
@font-face
获取一个Web字体@import
导入其他CSS文件@media
创建特定于某些“媒体”类型的CSS规则,如印刷页,桌面屏幕或手机
来源:《Head First HTML 与 CSS》(中文第二版)P326-327
font-size: 14px
数字和
px
之间不能有空格14px
就是指字母的最低部分与最高部分之间有14像素
font-size: 120%
百分比是相对父元素字体的大小
font-size: 1.2em
1.2em就是1.2倍,相对父元素字体的大小
font-size: medium
关键字xx-small
,x-small
,samll
,medium
,`large
,x-large
,xx-larger
1.选择一个关键字(推荐small或medium),指定它作为body元素字体的大小,相当于页面的默认字体大小 2.使用em或百分数,相对于body字体大小制定其他元素的字体大小
为什么直接使用像素法?
浏览器默认的body字体的默认大小是16像素
标题的默认比例
h1
200%
h2
150%
h3
120%
h4
100%
h5
90%
h6
60%
来源:《Head First HTML 与 CSS》(中文第二版)P328,330, 334
哪两种方法可以设置字体粗细?
这种方法常用
font-weight: bold
字体变粗
font-weight: normal
不想继承父元素的变粗样式,就使用normal
恢复正常
很多浏览器不吃,不常用。
为font-weight
设置100到900的一个数(100,200,300,400,500,600,700,800,900)
font-weight: 500;
来源:《Head First HTML 与 CSS》(中文第二版)P335
<em>
来实现倾斜样式?font-style: itlac;
font-sytle: normal;
不想继承父元素的斜体时使用2.倾斜文本
font-style: oblique;
font-style: normal;
不想继承父元素的倾斜文本时使用
斜体风格和倾斜文本都能让字体向右倾斜,不过斜体风格还能让衬线弯曲。 因为浏览器原因,两种风格区别并不大,可以任意使用。
<em>
和倾斜风格<em>
是用来显示HTML结构的,表示文字需要强调,不是为了显示 HTML样式的。
而且,<em>
的样式可以改变。
来源:《Head First HTML 与 CSS》(中文第二版)P337-338
HTML页面可以有文本颜色、背景色、边框色
color
实际是元素的前景色,控制文本颜色和边框颜色
border-color
指定边框颜色
background-color
背景色
Web颜色使用红绿蓝颜色理论 每种颜色值为0-255,三色都为255,则相交处为白色; 三色均为0,则相交处为黑色。三者按比例混合,组成Web颜色。
color: rgb(256, 0, 120);
background-color: rgb(201, 102, 0);
数字在0到255之间。
color: rgb(20%, 50%, 80%);
background-color: rgb(80%, 40% 20%);
color: red;
backgound-color: silver;
共约有150种颜色,颜色名称不区别大小写
Aqua Black Blue Fuchsia Gray Green Lime Maroon Navy Olive Purple Red Sliver Teal White Yellow
最为常用的制定颜色的方法
十六进制, 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安全颜色了。
文本和背景要用对比度最大的颜色 深颜色和浅颜色搭配,比如黑对白(黑字白底) 文本用深色,背景使用浅色
来源:《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>
标记要插入内容的元素是哪个?
<ins>
举例
<ins>同享健康生活</ins>
来源:《Head First HTML 与 CSS》(中文第二版)P353
字体
定制页面中使用的字体是什么属性? font-family
控制字体大小的是什么属性? font-size
设置文本颜色的是什么属性? color
影响字体的粗细的是什么属性?都有哪些值? 属性:font-weight
值: lighter normal bold bolder
为文本增加更多风格的是什么属性?都有哪些值? 属性:text-decoration
值: none underline overline line-through
来源:《Head First HTML 与 CSS》(中文第二版)P312-313