CSS3之font属性

最新推荐文章于 2023-02-03 11:30:02 发布

Programmer.杨

最新推荐文章于 2023-02-03 11:30:02 发布

阅读量1.1k

点赞数 1

分类专栏：前端技术-CSS 文章标签： font-family font-size font-align CS

本文链接：https://blog.csdn.net/YWB88888888/article/details/102704481

版权

前端技术-CSS 专栏收录该内容

26 篇文章 0 订阅

订阅专栏

font：

作用：
          在一个声明中设置所有字体属性
说明：
          可设置的属性是（按顺序）： “font-style font-weight font-size/line-height font-family” ,font-size和font-family的值是必需的，如果缺少了其他值，将会插入默认值。值与值之间要有一个空格，字体要带引号，如果设置安全字体，则在字体之间要有 “, ”
用法示例：
          font: italic bold 12px “Microsoft YaHei”, Arial, “幼圆”;

font-size:

作用：
          用于设置文字字体大小
说明：
          在用户没有更改浏览器默认的字体的情况下，浏览器默认字体大小为16px
常用值：
          (NUMBER): 把字体大小设置为一个固定的值
          (NUMBER%): 把字体大小设置为基于父元素的一个百分比值
          (inherit): 从父元素继承字体尺寸

font-family:

作用：
用于指定文字字体
说明：
关于浏览器安全字体：font-family可以把多个字体名称作为一个 “回退” 系统来保存。如果浏览器不支持第一个字体，则会尝试下一个。在书写过程中，每个值用逗号分开。如果字体名称包含空格，它必须加上引号。

font-style:

作用：
          用于指定文本字体样式
说明：
          该属性主要作用是将文字变为斜体，或将斜体文字变为正常文字
常用值：
          (normal): 默认值，浏览器显示一个标准的字体样式
          (italic): 显示一个斜体的字体样式
          (inherit): 从父元素继承字体样式

font-weight:

作用：
          设置文本粗细
说明：
          该属性主要用于将文字变为粗体，或将粗体文字变为正常文字
常用值：
          (NUMBER): 用数字定义由粗到细的字符，400等同于normal，而700等同于bold
          (normal): 默认值，定义标准的字符
          (bold): 定义粗体字符
          (inherit): 从父元素继承字体的粗细

代码示例：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3之font属性</title>
    
    <style type="text/css">
        section {
            width: 890px;
            margin-left: 300px;
        }
        h1 {
            text-align: center;
            font-weight: 400;
        }
        em {
            font-style: normal;
            color: #0066CC;
        }
        #posterSpan {
            color: #900;
        }
        #timeSpan {
            color: darkgray;
        }
        #otherDiv {
            text-align: center;
            font-size: 14px;
        }
        #searchIn {
            color: red;
        }
        #queryBtn {
            color: green;
            font-family: "Microsoft YaHei";
        }
        #primaryInfo {
            font-weight: 700;
        }
    </style>
</head>
<body>
    <section>
        <h1>中乙队赛前突然换帅仍胜毅腾 高原黑马欲阻击舜天</h1>
        <div id="otherDiv">
            <span id="timeSpan">2017年07月16日20:11</span>
            <span id="posterSpan">新浪体育 评论中大奖（11人参与）</span>
            <a href="CSS3_Selector01.html" rel="bookmark">收藏本文</a>
            <input id="searchIn" name="searchIn" type="text" maxlength="20" value="请输入查询条件"/>
            <input id="queryBtn" name="queryBtn" type="submit" value="搜索" />
        </div>
        <hr/>
        <p>新浪体育讯　7月16日是燕京啤酒<em>[微博]</em>2017中国足协杯第三轮比赛，丽江嘉云昊队主场迎战哈尔滨毅腾队的比赛日。然而就在比赛日中午，丽江嘉云昊队主帅李虎和另外两名成员悄然向俱乐部提出了辞呈，并且收拾行囊准备离开。在这样的情况下，丽江嘉云昊队不得不由此前的教练员杨贵东代理指挥了本场比赛。</p>
        <p>在昨日丽江嘉云昊队主帅李虎就缺席了赛前的新闻发布会，当时俱乐部给出的解释是李虎由于身体欠佳，去医院接受治疗。然而今日李虎出现在俱乐部时，向记者否认了这一说法，并且坦言已经向俱乐部提出了辞呈。</p>
        <p>据记者多方了解的情况，李虎<em>[微博]</em>极其教练组近来在执教成绩上承受了不小的压力，在联赛间歇期期间，教练组曾向俱乐部提出能够多引进有实力的球员补强球队，然而由于和俱乐部在投入以及成绩指标上的分歧，李虎最终和教练组一起在比赛日辞职。</p>
        <p>这样的情况并没有影响到丽江嘉云昊队<em>[微博]</em>的队员，在比赛中丽江队在主场拼的非常凶，在暴雨之中仍然发挥出了体能充沛的优势，最终凭借点球击败了中超球队哈尔滨毅腾，顺利晋级下一轮比赛。<span id="primaryInfo">根据中国足协杯的赛程，丽江嘉云昊队将在本月23日迎战江苏舜天队。</span></p>
    </section>
</body>
</html>