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. 自己写bitmap

    备注:1.原创文章,转载请标明出处: 2.欢迎建议和意见 3.我的实现是C语言,为了保护公司隐私,下述数据类型被我改了.实际上int应改是无符号4个字节的类型,byte是有符号1个字节,才能保证移植性 ...

  2. python第七十七天－－－HTML

    HTML5 :规则, 浏览器的通用规则 1.规则, 浏览器的通用规则 2.开发者: 学习html 规则 开发后台程序 - 写html文件 (当作模板) - 数据库获取数据,替换到指定的HTML文件中的 ...

  3. 关于使用WeUI在IE中提示“font-face 未能完成 OpenType 嵌入权限检查。权限必须是可安装的。”的问题

    @font-face是css3中定义字体的规则. 首先,在使用weui时,在Chrome.Firefox下没有问题,但是在IE下提示“font-face 未能完成 OpenType 嵌入权限检查.权限 ...

  4. Linux 设备树的解释 - DTB文件格式【转】

    https://blog.csdn.net/cc289123557/article/details/51782449 1.dtb文件格式 dtb文件的格式如下图 : NOTE:不同部分顺序可能不一样 ...

  5. [BUG]Appium1.9.1 这个问题竟然花了我5分钟进行定位

    1.先上问题,知道是什么问题先 EE ====================================================================== ERROR: tes ...

  6. 转://oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改处理过程

    oracle 11gR2 oracle restart 单机使用asm存储 主机名发生更改并且主机重启后处理过程: 以下为解决方案: 1. Remove Oracle Restart configur ...

  7. 详解PHP操作Memcache缓存技术提高响应速度的方法

    本文转载http://blog.csdn.net/zhihua_w  不错的博客,仅供本人学习之用 一般来说,如果并发量不大的情况,使不使用缓存技术并没有什么影响,但如果高并发的情况,使用缓存技术就显 ...

  8. （2）HomeAssistant 参数配置

    如果你希望使用其它目录作为配置文件所在地,可以使用以下命令启动home assistant:hass --config path/to/config 在配置目录下,有一个文件configuration ...

  9. metamascara学习导论

    研究了一段时间的metamascara终于有了一点起色,因为前段时间有一个小伙伴问了我一个问题,就是能不能将metamask嵌入到自己设计的网站中,在自己要进行交易的时候也会弹出一个页面来让用户确认这 ...

  10. mybatis基础系列（一）——mybatis入门

    好久不发博客了,写博文的一个好处是能让心静下来,整理下之前学习过的一些知识一起分享,大神路过~ mybatis简介 MyBatis 是一款优秀的持久层框架,它支持定制化 SQL.存储过程以及高级映射. ...