CSS Fonts（字体）属性用定义字体系列，大小粗细，和文字样式（如斜体）

3.1字体系列

CSS使用font-family属性定义文本字体系列

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

div {font-family: 'Microsoft Yahei', '微软雅黑' ; }

注意：各种字体之间必须用英文状态下的逗号隔开

一般情况下，如果有空格隔开的多个单词组成的字体，加引号。

尽量使用系统默认子弟字体，保证在任何用户的浏览器都能正确显示。

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>字体属性之字体系列</title>

    <style>

        h2 {

            font-family: '微软雅黑';

        };

        p {

            font-family: 'Times New Roman', Times, serif;

        }

    </style>

</head>

    <h2>pink的秘密</h2>

    <P>卢本伟牛逼</P>

    <p>卢本伟牛逼</p>

</body>

</html>

3.2字体大小

CSS使用font-size属性定义字体大小

p {

font-size： 20px;

}

注意：px（像素）大小是我们网页最常用的单位

谷歌浏览器默认文字大小为16px

可以给整个body指定整个页面文字的大小

标题具有特殊性需要单独指定文字大小。

代码实例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS字体属性之字体大小</title>
    <style>
        body{
            font-size: 16px;
        }
        /* 标题标签比较特殊，需要单独指定文字大小 */
        h2 {
             font-size: 18px;
         }
    </style>
</head>
<body>
    <h2>卢本伟牛逼</h2>
    <p>我卢本伟没有开挂</p>
    <p>我卢本伟没有开挂</p>
</body>
</html>

3.3字体的粗细

CSS使用font-weight属性设置文本字体的粗细。

p{

font-weight：bold;

}

属性值 描述
normal 默认值（不加粗的）
bold 定义粗体（加粗的）
100-900 400等同于normal，而700等同于bold 注意数字后面不能加数字

注意：学会让粗标签（如h和strong等）不加粗，或者其他标签加粗

在实际开发中我们喜欢用数字

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>CSS字体粗细</title>

    <style>

        .bold {

            /* font-weight:bold */

            /* 这个700的后面不要给单位 等价于bold都是加粗的效果 */

            /* 在实际开发中我们提倡使用数字 表示加粗或者变细 */

            font-weight: 700;

        }

        h2 {

            font-weight: 400;

            /* font-weight: normal;实际开发中用数字 */

        }

    </style>

</head>

<body>

    <h2>pink的秘密</h2>

    <p>优雅淡然</p>

    <p class="bold">前端必胜</p>

</body>

</html>

3.4文字样式

CSS使用font-style属性设置文本风格。

p {

font-style: normal;

}

属性值 作用
normal 默认值，浏览器会显示标准的字体样式 font-style：normal
italic 浏览器会显示斜体的字体样式

代码示例：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>css字体属性之文字样式</title>

    <style>

        p {

            font-style: italic;

        }

        em {

            /* 让倾斜的字体不倾斜 赶紧脉动起来 */

            font-style: normal;

        }

    </style>

</head>

<body>

    <p>同学，上课时候的你</p>

    <em>下课时候的你</em>

</body>

</html>

3.5字体复合属性

字体属性可以把以上文字样式综合来写，这样可以节约代码：

body {

           font: font-style font-weight font-size/line-height font-family; 
         }
         注意：
         使用font属性时，必须按照上面的语法格式中循序书写，不能更换循序，而且各个属性之间用空格隔开。
         不需要设置的属性可以省略（取默认值）但必须保留font-size 和font-family属性，否则font属性不起作用。
        代码示例：
<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>复合属性</title>

    <style>

        /* 想要div倾斜 加粗 字号设置为16像素 并且微软雅黑 */

        div {

            /* font-style: italic;

            font-weight: 700;

            font-size: 16px;

            font-family: 'Microsoft yahei';

            line-height: normal; */

            /* 复合属性:简写的方式 节约代码 */

            /* 必须严格按照一下循序: */

            /* font: font-style font-weight font-size/line-height font-family; */

            font: italic 700 16px 'MicroSoft yahei';

        }

    </style>

</head>

<body>

    <div>三生三世十里桃花</div>

</body>

</html>

3.6字体属性小结

属性 表示 注意点
font-size 字号 我们通常用的单位是px像素，一定要跟上单位
font-family 字体 实际工作中按照团队约定来写字体
font-weight 字体粗细 记住加粗是700或者bold 不加粗是normal或者400 记住数字不要跟单位
font-style 字体样式 记住倾斜体是italic 不倾斜是normal 工作中我们常用normal
font 字体连写 1字体连写是有循序的 不能随意换位置的 2.其中字号和字体必须同时出现

3.CSS字体属性的更多相关文章

  1. CSS字体属性大全

    文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...

  2. CSS字体属性

    CSS字体属性 CSS Fonts(字体)属性拥有定义字体系列.大小.粗细和文字样式(如斜体) 字体系列 <style type="text/css"> div{ fo ...

  3. CSS字体属性与文本属性

    CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...

  4. css字体属性(font)

    字体名称属性(font-family) 这个属性设定字体名称,如Arial, Tahoma, Courier等.例句如下: .s1 {font-family:Arial}     字体大小属性(fon ...

  5. CSS字体属性 font属性

    CSS的所有字体属性: ·-·  font 在一个声明中设置所有的字体属性 ·-·  font-family 指定文本的字体系列 ·-·  font-size 指定文本的字体大小  (属性值是整数字, ...

  6. 所有CSS字体属性

    font(在一个声明中设置所有的字体属性) font-family(指定文本的字体系列) font-size(指定文本的字体大小) font-style(指定文本的字体样式) font-variant ...

  7. css字体属性相关。

    出处:CSS 参考手册    http://www.w3school.com.cn/cssref/index.asp text-decoration 属性 说明:这个属性允许对文本设置某种效果,如加下 ...

  8. 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用

    嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...

  9. CSS(2)---css字体、文本样式属性

    css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...

随机推荐

  1. CodeForces - 1047CEnlarge GCD（这题很难，快来看题解，超级详细，骗浏览量）

    C. Enlarge GCD time limit per test1 second memory limit per test256 megabytes inputstandard input ou ...

  2. Jenkins 源代码管理（SVN）

    Subversion 安装插件 1.首先将本地的自动化用例打包上传 svn 2.配置 jenkins 源代码管理(每次执行 jenkins 时,会自动 check-ou t配置地址中的代码到 Jenk ...

  3. Redis集群搭建的三种方式

    一.Redis主从 1.1 Redis主从原理 和MySQL需要主从复制的原因一样,Redis虽然读取写入的速度都特别快,但是也会产生性能瓶颈,特别是在读压力上,为了分担压力,Redis支持主从复制. ...

  4. Coursera课程笔记----P4E.Capstone----Week 2&3

    Building a Search Engine(week 2&3) Search Engine Architecture Web Crawling Index Building Search ...

  5. Appium+Python-项目实践一

    一.前言                            前面讲了环境搭建和常用的元素定位,后续会持续以项目实践的方式去慢慢学习以及整理各方面的知识点,具体不会详细阐述,但会贴上完整代码,想要了 ...

  6. 【Kafka】监控及运维——kafka-eagle

    目录 简单介绍 概述 安装部署 一.环境要求 二.下载源码包并解压 三.准备数据库 四.修改配置文件 五.配置环境变量 六.启动kafka-eagle 七.成功运行 简单介绍 概述 Kafka-eag ...

  7. 【Kafka】Kafka集群基础操作！新手上路必备~

    目录 bin目录 Topic命令概览 创建Topic 查看Topic 描述Topic Producer生产数据 Consumer消费数据 增加topic分区数 增加配置 删除配置 删除Topic 所有 ...

  8. 安装stanfordcorenlp成功，import stanfordcorenlp失败，出现错误：importerror-no-module-named-psutil

    1.问题描述 安装stanfordcorenlp成功,import stanfordcorenlp失败,pycharm中输入import stanfordcorenlp,然后运行,出现错误:impor ...

  9. 第一行Kotlin系列（一）kotlin按钮点击事件

    按钮findViewBuId <Button android:id="@+id/mButton4" android:layout_width="wrap_conte ...

  10. python学习第七天--文件系统常用模块os,os.path,pickle

    模块是一个可用代码段的打包,后缀名为py,可被别的程序引入#使用import OS模块:operting system操作系统#import os os.chdir(path) 改变当前工作目录 os ...