css字体样式

慕.晨风

已于 2023-04-10 21:07:56 修改

阅读量2.5k

点赞数

分类专栏：前端设计文章标签： html

于 2022-03-09 13:57:35 首次发布

本文链接：https://blog.csdn.net/qq_51943014/article/details/123371250

版权

前端设计专栏收录该内容

5 篇文章 0 订阅

订阅专栏

1.字体大小

语法格式:

font-size：字号大小;

font-size属性用于设置字体的大小，该属性的属性值可以为

px	像素单位
em	倍率单位
%	百分比单位

本人推荐用像素单位 -- px.

p{
   font-size:20px;
}

2、字体种类

语法格式:

font-family : 字体种类名;

font-family属性用于设置字体类别。常用的字体有宋体、黑体、微软雅黑等，个人比较喜欢用微软雅黑字体。

p{
   font-family:"微软雅黑";
}

family-family 属性可以同时指定多个字体，各字体间用英文逗号隔开。

此时对于字体种类的选择是这样的，当你的浏览器不支持第一种字体时，则会自动匹配下一个，直到匹配到支持的字体为止。若设置的字体都不支持，则浏览器会选择用户电脑上的默认字体。

body{
      font-family:"微软雅黑","宋体","黑体";
}

还有一点要注意：中文字体格式需要加英文状态的双引号，英文不需要。

3、字体粗细

语法格式:

font-weight ：属性值;

font-weight属性用于定义字体粗细，其属性值

normal	标准字体样式。为默认值
bold	定义较粗体
bolder	定义加粗体
lighter	定义细体
100~900	定义由细到粗的范围

其中的bold 和bolder其实显示效果差不多。

100~900 中必须取100的整数倍，100 相当于 lighter ，400 等同于normal，700相当于blod，900相当于bloder。在实际开发中一般不使用数值的属性值格式。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>字体Weight</title>
    <style type="text/css">
        #p1{font-weight:lighter;}
        #p2{font-weight:normal;}
        #p3{font-weight:bold;}
        #p4{font-weight:bolder;}
    </style>
</head>
<body>
    <p id="p1">字体粗细为:lighter</p>
    <p id="p2">字体粗细为:normal</p>
    <p id="p3">字体粗细为:bold</p>
    <p id="p4">字体粗细为:bolder </p>
</body>
</html>

4、字体风格

语法格式:

font-style:属性值；

font-style属性用于定义字体的风格，比如斜体和正常。

其属性值如下:

normal	标准字体风格, 为默认字体风格
italic	斜体
oblique	斜体

从表中可以看到 italic 和 oblique 的属性效果都是斜体。两者在表现效果上没有区别。

但有些字体没有 italic 的属性，而 oblique 所有字体都可用。原因是 italic 是使用了字体的倾斜属性，而 oblique 只是单纯的使文字倾斜。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>文字Style</title>
    <style type="text/css">
        #p1{font-style:normal;}
        #p2{font-style:italic;}
        #p3{font-style:oblique;}
    </style>
</head>
<body>
    <p id="p1">字体样式为normal</p>
    <p id="p2">字体样式为italic</p>
    <p id="p3">字体样式为oblique</p>
</body>
</html>

5、英文字符的变体

语法格式

font-variant： 属性值;

font-variant 用于设置英文字符的变体。由标题可知这个属性对中文无效。

属性值包括

normal	标准字体
small-caps	小型大写字体。即小写字母会转化为大写

使用小型大写字体的字母和其余文本相比，字体会变小点。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #p1{ font-variant: normal;}
        #p2{font-variant: small-caps;}
    </style>
</head>
<body>
     <p id="p1">abCdEf</p>
     <p id="p2">abCdEf</p>
</body>
</html>

6、定义服务器字体

基本语法格式:

@font-face{

    font-family:字体名字;

    src:url();

}

font-family 用于指定该服务器的字体名字，该名称可以随意定义。

src 用于指定字体文件的路径。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style text="text/css">
     @font-face {
         font-family: mu;
         src: url(FZJZJW.TTF);
     }
     p{
         font-family: "mu";
         font-size: 30px;
     }
    </style>
</head>
<body>
  <p>hello muchenfeng</p>  
</body>
</html>

推荐一个不错免费的字体下载网址：

https://www.1001fonts.com/

7、综合设置字体样式

基本语法格式:

选择器{
       font:font-style font-variant font-weight font-size/line-height font-family;
}

必须按照上面语法中的顺序书写，且各属性间用空格隔开。

  #p1{
       font-family: "微雅软黑";
       font-size: 20px;
       font-weight: bold;
       font-style: oblique;
       font-variant: small-caps;
       line-height: 15px;
 }

等价于

 #p2{
            font:oblique small-caps bold 20px/15px "微雅软黑";
        }

慕.晨风

关注

0
点赞
踩
4

收藏

觉得还不错? 一键收藏
打赏
0
评论
css字体样式

HTML 字体样式
复制链接

扫一扫

专栏目录