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. mysql基础（三）存储引擎和锁

    存储引擎的概念: 关系型数据库表是用于存储和组织信息的数据结构,可以将表理解为由行和列组成的表格,各种各样,不同的表结构意味着存储不同类型的数据,在数据的处理上也会存在着差异,对于mysql来说,它提 ...

  2. 历史上的今天mysql数据库包含详情分类以及图片

    历史上的今天mysql数据库包含详情分类以及图片 https://item.taobao.com/item.htm?spm=a2oq0.12575281.0.0.50111debo71iaJ& ...

  3. Egg Dropping Puzzle

    The Two Egg Problem 曾经是Google的一道经典题. 题意:有一个百层高楼,鸡蛋在\(L\)层及以下扔都不碎,在\(L\)层以上都会碎.现在某人有\(k\)个鸡蛋,问在最坏情况下, ...

  4. 图论--网络流--最大流 洛谷P4722（hlpp）

    题目描述 给定 nn 个点,mm 条有向边,给定每条边的容量,求从点 ss 到点 tt 的最大流. 输入格式 第一行包含四个正整数nn.mm.ss.tt,用空格分隔,分别表示点的个数.有向边的个数.源 ...

  5. Jmeter 插件图表分析

    1.jp@gc - Actiive Threads Over Time:不同时间的活动用户数量展示(图表) 当前的时间间隔是1毫秒,在 setting 中可以设置时间间隔以及其他的参数,右击可以导出 ...

  6. 一只简单的网络爬虫（基于linux C/C++）————守护进程

    守护进程,也就是通常说的Daemon进程,是Linux中的后台服务进程.它是一个生存期较长的进程,通常独立于控制终端并且周期性地执行某种任务或等待处理某些发生的事件.守护进程常常在系统引导装入时启动, ...

  7. Nginx读书笔记三----资源分配

    1.内存及磁盘资源分配 1.1 在磁盘中存储HTTP请求体 语法: client_body_in_file_only on|clean|off; 默认: client_body_in_file_onl ...

  8. 【漫画】JAVA并发编程三大Bug源头(可见性、原子性、有序性)

    原创声明:本文转载自公众号[胖滚猪学编程]​ 某日,胖滚猪写的代码导致了一个生产bug,奋战到凌晨三点依旧没有解决问题.胖滚熊一看,只用了一个volatile就解决了.并告知胖滚猪,这是并发编程导致的 ...

  9. HTTPS GET | POST | DELETE 请求

    依赖: <dependency> <groupId>com.squareup.okhttp3</groupId> <artifactId>okhttp& ...

  10. 【Hadoop离线基础总结】完全分布式环境搭建

    完全分布式环境搭建 服务规划 适用于工作当中正式环境搭建 安装步骤 第一步:安装包解压 停止之前的Hadoop集群的所有服务,并删除所有机器的Hadoop安装包,然后重新解压Hadoop压缩包 三台机 ...