CSS 字体(font)实例
CSS 字体属性定义文本的字体系列、大小、加粗、风格（如斜体）和变形（如小型大写字母）。
CSS 字体系列
在 CSS 中，有两种不同类型的字体系列名称：

通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）
除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体
CSS 字体属性
属性 描述
font   简写属性。作用是把所有针对字体的属性设置在一个声明中。
font-family    设置字体系列。
font-size  设置字体的尺寸。
font-size-adjust   当首选字体不可用时，对替换字体进行智能缩放。（CSS2.1 已删除该属性。）
font-stretch   对字体进行水平拉伸。（CSS2.1 已删除该属性。）
font-style 设置字体风格。
font-variant   以小型大写字体或者正常字体显示文本。
font-weight    设置字体的粗细。
######
family-name
generic-family
用于某个元素的字体族名称或/及类族名称的一个优先表。

默认值：取决于浏览器。

inherit    规定应该从父元素继承字体系列。

值  描述
normal 默认值。浏览器显示一个标准的字体样式。
italic 浏览器会显示一个斜体的字体样式。
oblique    浏览器会显示一个倾斜的字体样式。
inherit    规定应该从父元素继承字体样式。

1.设置文本的字体
本例演示如何设置文本字体。
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        p.serif{font-family:"Times NEW Roman",Georgia,Serif}
        p.sansserif{font-family:Arial,Verdana,Sans-serif}
    </style>
</head>
<body>
<h1>CSS font-family</h1>
<p class="serif">This is a paragraph,shown in the Times New Roman font.</p>
<p class="sansserif">This is a paragraph, shown in the Arial font.</p>
</body>

2.设置字体尺寸
本例演示如何设置字体尺寸。

<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        h1 {font-size: 300%}
        h2 {font-size: 200%}
        p {font-size: 100%}
    </style>
</head>
<body>
<h1>This is header 1</h1>
<h2>This is header 2</h2>
<p>This is a paragraph</p>

</body>

3.设置字体风格
本例演示如何设置字体风格。
    <style type="text/css">
        p.normal {font-style: normal}
        p.italic {
            font-style: italic;}
        p.oblique {
            font-style:oblique;
        }
    </style>
</head>
<body>
<p class="normal">This is a paragraph, normal.</p>
<p class="italic">THis is a paragraph, italic.</p>
<p class="oblique">This is a paragraph, oblique.</p>
</body>

4.设置字体的异体
本例演示如何设置字体的异体。
    <style type="text/css">
        p.normal {font-variant: normal}
        p.small {font-variant: small-caps}
    </style>
</head>
<body>
<p class="normal">This is a paragraph</p>
<p class="small">This is a paragraph</p>
</body>

5.设置字体的粗细
本例演示如何设置字体的粗细。
    <style type="text/css">
        p.normal {font-weight:normal}
        p.thick {font-weight: bold}
        p.thicker {font-weight:900}
    </style>
</head>
<body>

<p class="normal">This is a paragraph</p>

<p class="thick">This is a paragraph</p>

<p class="thicker">This is a paragraph</p>

</body>

6.所有字体属性在一个声明之内
本例演示如何使用简写属性将字体属性设置在一个声明之内。

    <style type="text/css">
        p.ex1{font: italic arial,sans-serif;}
        p.ex2{font:italic bold 12px/30px arial,sans-serif;}
    </style>
</head>
<body>
<p class="ex1">is a paragraph. This is a paragraph. This is a paragraph. </p>
<p class="ex2"> is a paragraph. This is a paragraph.</p>
</body>

CSS 字体(font)实例的更多相关文章

  1. W3School-CSS 字体(font)实例

    CSS 字体(font)实例 CSS 实例 CSS 背景实例 CSS 文本实例 CSS 字体(font)实例 CSS 边框(border)实例 CSS 外边距 (margin) 实例 CSS 内边距 ...

  2. css字体样式(Font Style),属性

    css字体样式(Font Style),属性   css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者 ...

  3. CSS：CSS 字体

    ylbtech-CSS:CSS 字体 1.返回顶部 1. CSS 字体 CSS字体属性定义字体,加粗,大小,文字样式. serif和sans-serif字体之间的区别  在计算机屏幕上,sans-se ...

  4. 3.CSS字体属性

    CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体) 3.1字体系列 CSS使用font-family属性定义文本字体系列 p { font-family:'微软雅黑' ;} ...

  5. CSS字体属性大全

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

  6. css字体图标的使用方法

    提要:对于传统的一般用css雪碧(css sprite)来搞,目前大部分网站已经主要字体图标 ,利用font+css 或者font+html 来开发,今天总结了一下,记录之~ css sprite用背 ...

  7. Css - 字体图标

    Css - 字体图标 字体格式 ttf.otf.woff.svg.eot 现在流行将图标做成矢量的字体格式的文档,很多用户在放大页面的时候页面上的普通图片格式的图标就会变得模糊不清,这种字体图标在网页 ...

  8. CSS 分类 (Classification) 实例

    CSS 分类 (Classification) 实例CSS 分类属性 (Classification)CSS 分类属性允许你控制如何显示元素,设置图像显示于另一元素中的何处,相对于其正常位置来定位元素 ...

  9. css 字体样式设置

    css字体样式(Font Style),属性 时间:2014-05-08 21:49 来源:我爱学习网 | 作者:我爱学习网 | 本文已影响 68353 人   css字体样式(Font Style) ...

随机推荐

  1. python中strip()方法学习笔记

    Python strip() 方法用于移除字符串头尾指定的字符(默认为空格). 当使用strip('xxx'),只要字符串头尾有"xxx"中的一个,就会去掉,而不是符合字符串''x ...

  2. JS获取当前星期几的简易写法

    var str = "今天是星期" + "日一二三四五六".charAt(new Date().getDay()); mark在此,方便日后复制 原文https ...

  3. VSCode + PYQT5 + QtDesigner 环境搭建和测试

    目的:编写Python桌面应用程序. 备注:也可以选择VS2017+QtDesigner ,但更喜欢VSCode 第1步:安装PyQt5和PyQt5-tools pip3 install -i htt ...

  4. PL/SQL 删除主键 ORA-02443: 无法删除约束条件-不存在的约束条件

    在PL/SQL developer中删除一个表的主键,然后把另外一个字段设置成主键,删除的过程中报错:ORA-02443 我遇到这个问题出现的背景是: alter table saleqtya dro ...

  5. 17秋 软件工程 第六次作业 Beta冲刺 Scrum3

    17秋 软件工程 第六次作业 Beta冲刺 Scrum3 各个成员冲刺期间完成的任务 世强:完成手势签到模块,重构活动详情页面: 陈翔:完善超级管理员后端login模块,完成logout模块: 树民: ...

  6. Java设计模式之十三 ---- 观察者模式和空对象模式

    前言 在上一篇中我们学习了行为型模式的备忘录模式(Memento Pattern)和状态模式(Memento Pattern).本篇则来学习下行为型模式的最后两个模式,观察者模式(Observer P ...

  7. bootstrap-datepicker default value

    $('.selectDate').datepicker({ format : "yyyy/mm/dd", autoclose : true, startDate : new Dat ...

  8. python五十四课——datetime模块

    3.datetime模块:理解:datetime可以认为是time模块的补充/扩展datetime模块中有一些常用类:datetime类:记录了日期和时间数据信息date类:记录了日期数据信息time ...

  9. python3 用户登录 day01

    '''用户登录作业需求:1. 三次重试机会2. 每次输错误时显示剩余错误次数'''num = 1while num <= 3: username = input("请输入用户名:&qu ...

  10. 使用RMAN Active duplicate创建异地auxiliary Database

    1g的RMAN duplicate 可以通过Active database duplicate和Backup-based duplicate两种方法实现.这里的测试使用的是Active databas ...