字体
• 通过font-family
可以指定标签中文字使用的字体。
• 例如:
p{
font-family:Arial}
上边这行代码指定了p标签中使用名为arial作为字体
• 一般来说只有用户计算机中安装了我们指定的字体时,它才会显示,否则这行代码是没有意义的。
• 通过font-family
可以同时指定多个字体。
• 例如:
p{font-family:Arial , Helvetica , sans-serif}
• 如上我实际上指定了三种字体,那么到底使用的是哪个呢?浏览器会优先使用第一个,如果没有找到则使用第二个,以此类推。
• 这里面sans-serif
并不是指的具体某一个字体,而是一类字体。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<style>
/*
font-face可以将服务器中的字体直接提供给用户去使用(当用户电脑没有安装指定的字体时)
问题:
1.加载速度
2.版权
3.字体格式
*/
@font-face {
/* 指定字体的名字 */
font-family:'myfont' ;
/* 服务器中字体的路径 format("truetype"):指定字体的格式,一般可不写*/
src: url('./font/ZCOOLKuaiLe-Regular.ttf') format("truetype");
}
p{
/*
字体相关的样式
color 用来设置字体颜色
font-size 字体的大小
和font-size相关的单位
em 相当于当前元素的一个font-size
rem 相对于根元素的一个font-size
font-family 字体族(字体的格式)
可选值:
serif 衬线字体
sans-serif 非衬线字体
monospace 等宽字体
- 指定字体的类别,浏览器会自动使用该类别下的字体
- font-family 可以同时指定多个字体,多个字体间使用,隔开
字体生效时优先使用第一个,第一个无法使用则使用第二个 以此类推
Microsoft YaHei,Heiti SC,tahoma,arial,Hiragino Sans GB,"\5B8B\4F53",sans-serif
*/
color: blue;
font-size: 40px;
/* font-family: 'Courier New'(有引号是因为中间有空格), Courier, monospace; */
font-family: myfont;
}
</style>
</head>
<body>
<p>
今天天气真不错,Hello Hello How are you!
</p>
</body>
</html>
字体的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
/*设置字体颜色,使用color来设置文字的颜色*/
color: red;
/*
* 设置文字的大小,浏览器中一般默认的文字大小都是16px
font-size设置的并不是文字本身的大小,
在页面中,每个文字都是处在一个看不见的框中的
我们设置的font-size实际上是设置格的高度,并不是字体的大小
一般情况下文字都要比这个格要小一些,也有时会比格大,
根据字体的不同,显示效果也不同
* */
font-size: 30px;
/*
* 通过font-family可以指定文字的字体
* 当采用某种字体时,如果浏览器支持则使用该字体,
* 如果字体不支持,则使用默认字体
* 该样式可以同时指定多个字体,多个字体之间使用,分开
* 当采用多个字体时,浏览器会优先使用前边的字体,
* 如果前边没有在尝试下一个
*/
/*font-family: arial , 微软雅黑;*/
/*
* 浏览器使用的字体默认就是计算机中的字体,
* 如果计算机中有,则使用,如果没有就不用
*
* 在开发中,如果字体太奇怪,用的太少了,尽量不要使用,有可能用户的电脑没有,就不能达到想要的效果。
*/
/*
font-family: 华文彩云 , arial , 微软雅黑;
也可以设置face表示字体,例如face="仿宋"
*/
font-family: "curlz mt";
}
</style>
</head>
<body>
<p class="p1">
我是一个p标签,ABCDEFGabcdefg
</p>
</body>
</html>
字体的其他样式
<!DOCTYPE