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. Asp.net webForm设置允许表单提交Html

    1. 在表单需要提交Html的页面头部加入  ValidateRequest="false" <%@ Page Language="C#" AutoEve ...

  2. Linux系统根据端口号来查看其进程并杀死进程

    1.首先是查看某个端口号,(以httpd服务为例) 2.查看此端口下进程以及进程号 3.我们使用awk命令过滤出第二列,即进程号 4.杀死进程 报错的这一行表示,要杀死的进程PID为3754,但是没有 ...

  3. Dubbo+zookeeper+SpringMVC搭建最简单的分布式项目

    Dubbo 是什么 一款分布式服务框架 高性能和透明化的RPC远程服务调用方案 SOA服务治理方案 Dubbo 架构流程图 Provider:服务提供方 Consumer:服务消费者 Registry ...

  4. python scrapy 登录知乎过程

    前面了解了scrapy框架的大概各个组件的作用, 现在要爬取知乎数据,那么第一步就是要登录! 看下知乎的登录页面发现登录主要是两大接口 一: 登录页面地址,获取登录需要的验证码,如下图 打开知乎登录页 ...

  5. GUI_鼠标事件

    所有的组件都有鼠标和键盘监听器 import java.awt.Button; import java.awt.FlowLayout; import java.awt.Frame; import ja ...

  6. 【Java多线程】AtomicLong和LongAdder

    AtomicLong简要介绍 AtomicLong是作用是对长整形进行原子操作,显而易见,在java1.8中新加入了一个新的原子类LongAdder,该类也可以保证Long类型操作的原子性,相对于At ...

  7. lamp环境安装

    每天学习一点点 编程PDF电子书免费下载: http://www.shitanlife.com/code lamp环境安装 1.查看mysql是否安装 service mysql status 2.查 ...

  8. 转载 Net多线程编程—System.Threading.Tasks.Parallel

    .Net多线程编程—System.Threading.Tasks.Parallel   System.Threading.Tasks.Parallel类提供了Parallel.Invoke,Paral ...

  9. ORA-01031: insufficient privileges 错误解决

    OS:linux redhat5.5  32bit 数据库:Oracle Database 10g Enterprise Edition Release 10.2.0.1.0 1.问题描述:该数据库监 ...

  10. Spring容器IOC解析及简单实现（转）

    文章转自http://blog.csdn.net/liushuijinger/article/details/35978965