HTML字体以及图标字体iconfont、FontAwesome的使⽤
字体
· 通过font-family可以指定标签中⽂字使⽤的字体。
· 例如：
p{font-family:Arial}
上边这⾏代码指定了p标签中使⽤名为arial作为字体
· ⼀般来说只有⽤户计算机中安装了我们指定的字体时，它才会显⽰，否则这⾏代码是没有意义的。
· 通过font-family可以同时指定多个字体。
· 例如：
p{font-family:Arial , Helvetica , sans-serif}
· 如上我实际上指定了三种字体，那么到底使⽤的是哪个呢？浏览器会优先使⽤第⼀个，如果没有到则使⽤第⼆个，以此类推。· 这⾥⾯sans-serif并不是指的具体某⼀个字体，⽽是⼀类字体。
<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('./f')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>
字体的样式
<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 html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.p1{
color: red;
font-size: 30px;
font-family:"微软雅⿊";
/
*
* font-style可以⽤来设置⽂字的斜体
* - 可选值：
* normal，默认值，⽂字正常显⽰
* italic ⽂字会以斜体显⽰
* oblique ⽂字会以倾斜的效果显⽰
* oblique ⽂字会以倾斜的效果显⽰
* - ⼤部分浏览器都不会对倾斜和斜体做区分，
* 也就是说我们设置italic和oblique它们的效果往往是⼀样的
* - ⼀般我们只会使⽤italic
*/
font-style: italic;
/*
* font-weight可以⽤来设置⽂本的加粗效果：
* 可选值：
* normal，默认值，⽂字正常显⽰
* bold，⽂字加粗显⽰
*
* 该样式也可以指定100-900之间的9个值，
* 但是由于⽤户的计算机往往没有这么多级别的字体，所以达到我们想要的效果
* 也就是200有可能⽐100粗，300有可能⽐200粗，但是也可能是⼀样的
*/
font-weight: bold;
/*
* font-variant可以⽤来设置⼩型⼤写字母
* 可选值：
* normal，默认值，⽂字正常显⽰
* small-caps ⽂本以⼩型⼤写字母显⽰
*
* ⼩型⼤写字母：
* 将所有的字母都以⼤写形式显⽰，但是⼩写字母的⼤写，
* 要⽐⼤写字母的⼤⼩⼩⼀些。
*/
font-variant: small-caps ;
}
.p2{
/*设置⼀个⽂字⼤⼩*/
font-size: 50px;
/*设置⼀个字体*/
font-family：华⽂彩云;
/*设置⽂字斜体*/
font-style: italic;
/*设置⽂字的加粗*/
font-weight: bold;
/
*设置⼀个⼩型⼤写字母*/
font-variant: small-caps;
}
.p3{
/*
* 在CSS中还为我们提供了⼀个样式叫font，
* 使⽤该样式可以同时设置字体相关的所有样式,
* 可以将字体的样式的值，统⼀写在font样式中，不同的值之间使⽤空格隔开
*
* 使⽤font设置字体样式时，斜体加粗⼩⼤字母，没有顺序要求，甚⾄可写可不写，fontweight默认值
* 如果不写则使⽤默认值，但是要求⽂字的⼤⼩和字体必须写，⽽且字体必须是最后⼀个样式 * ⼤⼩必须是倒数第⼆个样式
*
* 实际上使⽤简写属性也会有⼀个⽐较好的性能
*/
font: small-caps bold italic 60px "微软雅⿊";
}
</style>
</head>
<body>
<p class="p3">我是⼀段⽂字，ABCDEFGabcdefg</p>
<p class="p1">我是⼀段⽂字，ABCDEFGabcdefg</p>
<p class="p2">我是⼀段⽂字，ABCDEFGabcdefg</p>
</body>
</html>
字体分类
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>字体的分类</title>
<style type="text/css">
p{
font-family: arial ，微软雅⿊，华⽂彩云, serif;
}
</style>
</head>
<body>
<!--
在⽹页中将字体分成5⼤类：
serif（衬线字体）
sans-serif（⾮衬线字体）
monospace （等宽字体）
cursive （草书字体）
fantasy （虚幻字体）
以上这些分类都是⼀些⼤的分类，并没有涉及具体的类型，
如果将字体指定为这些格式，浏览器会⾃⼰选择指定类型的字体。
⼀般会将字体的⼤分类，指定为font-family中的最后⼀个字体
-->
<p >衬线字体：我是⼀段⽂字，ABCDEFGabcdefg</p>
<p >⾮衬线字体：我是⼀段⽂字，ABCDEFGabcdefg</
p> <p >等宽字体：我是⼀段⽂字，IHABCDEFGabcdefg</p> <p >草书字体：我是⼀段⽂字，ABCDEFGabcdefg</p>
<p >虚幻字体：我是⼀段⽂字，ABCDEFGabcdefg</p>
</body>
</html>
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论