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不可变对象

    str是不变对象,而list是可变对象. 对于不可变对象,比如对str进行操作: # 对于list进行操作,list内部的内容是会变化的: >>> a = ['c', 'b', 'a ...

  2. [20171124]xxd与通配符.txt

    [20171124]xxd与通配符.txt --//linux 上许多命令都支持通配符,比如$ ls -l *.txt-rw-r--r-- 1 oracle oinstall 44801024 201 ...

  3. 安全之路 —— 借助DLL进行远程线程注入实现穿墙与隐藏进程

    简介        大多数后门或病毒要想初步实现隐藏进程,即不被像任务管理器这样典型的RING3级进程管理器找到过于明显的不明进程,其中比较著名的方法就是通过远程线程注入的方法注入将恶意进程的DLL文 ...

  4. Head First Android --- Intent

    How to create the intentYou create an intent that specifies an action using the following syntax:whe ...

  5. Beta冲刺（1/5）（麻瓜制造者）

    今天小组进行了第一次冲刺,虽然新组员还没有确定. 今日完成任务 邓弘立:修改登录代码 李佳铭: 用户收藏UI代码编写 江郑: 进行了后台管理员界面ui的设计和环境的搭建 刘双玉:后台github仓库建 ...

  6. [原创]Javascript模拟“类”的综合实现方式以及部分细节【截至ES6】

    [原创]Javascript模拟“类”的综合实现方式以及部分细节[截至ES6] 前言   最近几个旧项目里使用的图片编辑插件出现Bug, 经Review 后确定需要在其内外均做些改动,但是头疼的发现部 ...

  7. 「PKUSC2018」神仙的游戏

    题目链接 比如说上面\(|S|\)为12的字符串,我们欲求出\(f(9)\)的值,那么上面相同颜色的字符必须两两能够匹配.也就是说,同种颜色的字符集里不能同时出现0和1.如果只考虑同种颜色集里相邻的两 ...

  8. nginx与location语法详解

    Location语法优先级排列 匹配符 匹配规则 优先级 = 精确匹配 ^~ 以某个字符串开头 ~ 区分大小写的正则匹配 ~* 不区分大小写的正则匹配 !~ 区分大小写不匹配的正则 !~* 不区分大小 ...

  9. 分布式消息列队RocketMQ部署

    模式: 多Master多Slave模式,异步复制: 每个 Master 配置一个 Slave,有多对Master-Slave,HA 采用异步复制方式,主备有短暂消息延迟,毫秒级. 优点:即使磁盘损坏, ...

  10. HDU2966 In case of failure（浅谈k-d tree）

    嘟嘟嘟 题意:给定\(n\)个二维平面上的点\((x_i, y_i)\),求离每一个点最近的点得距离的平方.(\(n \leqslant 1e5\)) 这就是k-d tree入门题了. k-d tre ...