css字体属性定义文本的字体系列 大小 加粗 风格 和 变形(如小型大写字母(类似于大写字母字体变小了))

css字体系列

在css中 有两种不同类型的字体系列名称

1.通用字体系列 - 拥有相似外观的字体系统组合（比如 "Serif" 或 "Monospace"）
2.特定字体系列 - 具体的字体系列（比如 "Times" 或 "Courier"）

指定字体系列

font-family 属性定义字体系列

body {font-family: sans-serif;}

字体风格

属性 font-style规定了字体的属性

该属性有三个值

normal 文本正常显示

italic 文本斜体显示

oblique 文本倾斜显示

italic 和 oblique 的区别
font-style 非常简单：用于在 normal 文本、italic 文本和 oblique 文本之间选择。唯一有点复杂的是明确 italic 文本和 oblique 文本之间的差别。
斜体（italic）是一种简单的字体风格，对每个字母的结构有一些小改动，来反映变化的外观。与此不同，倾斜（oblique）文本则是正常竖直文本的一个倾斜版本。
通常情况下，italic 和 oblique 文本在 web 浏览器中看上去完全一样。

字体变形

font-variant属性可以设定小写字母大写

字体加粗

font-weight设置文本的粗细

关键字 100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别，那么这些数字就直接映射到预定义的级别，100 对应最细的字体变形，900 对应最粗的字体变形。数字 400 等价于 normal，而 700 等价于 bold。
如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

字体大小

font-size属性可以控制字体的大小

css字体实例：

<head>

        <meta charset="UTF-8">

        <title>字体</title>

        <style type="text/css">

            p.font {

                /*设置字体样式*/

                font-family: "bodoni mt condensed";

                /*设置字体粗细程度*/

                font-weight: 400;

                /*设置字体大小*/

                font-size: 30px;

                /*设置字体显示风格*/

                font-style: italic;

            }

            p.variant {

                font-variant: small-caps;

            }

        </style>

    </head>

    <body>

        <p>这一段是正常的显示</p>

        <p class="font">这是一段文本 哈哈哈哈哈哈</p>

        <p class="variant">tianlianfeng</p>

    </body>

HTML 学习笔记 CSS样式（字体）的更多相关文章

  1. HTML 学习笔记 CSS样式（简介和语法）

    CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...

  2. HTML 学习笔记 CSS样式（定位）

    CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...

  3. HTML 学习笔记 CSS样式（边框）

    元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...

  4. HTML 学习笔记 CSS样式（框模型）

    CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述

  5. HTML 学习笔记 CSS样式（链接）

    我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...

  6. HTML 学习笔记 CSS样式（文本）

    CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...

  7. 前端学习笔记--CSS样式--文本

    1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:

  8. 学习笔记 css样式

    大小 width:宽度  height:高度 背景 background-color  背景色   background-image  背景图片     background-repeat  背景平铺 ...

  9. HTML 学习笔记 CSS样式（相对定位 绝对定位）

    CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...

随机推荐

  1. 《Kotli­n for ­androi­d Deve­lopers­》中文翻译

    以下内容为原创,欢迎转载,转载请注明 来自天天博客:http://www.cnblogs.com/tiantianbyconan/p/4939080.html 之前一直在关注Kotlin和Androi ...

  2. Android九宫格界面实现点击每个格点击跳转界面

    刚开始有个任务就是做一个九宫格界面,后来有个任务就是实现点击每个格并跳转界面实现每个格的功能.下面我就介绍一下我是如何实现该功能的 首先写一下我的想法是: 登录成功后显示一个九宫格界面,每个九宫格的每 ...

  3. iOS 滑动隐藏导航栏-三种方式

    /** 1隐藏导航栏-简单- */    self.navigationController.hidesBarsOnSwipe = YES; /** 2隐藏导航栏-不随tableView滑动消失效果 ...

  4. 【Android】不使用WebView来执行Javascript脚本（Rhino）

    前言 动态执行脚本能有效的降低重要功能硬编码带来的问题,尤其是依赖于第三方的应用,可以通过动态脚本+在线参数(例如友盟在线参数)再不更新应用的情况下升级功能. 声明 欢迎转载,但请保留文章原始出处:) ...

  5. cocoapods卸载与安装的各种坑

    在mac上安装cocoapods,一路的坑啊,无数报错啊有木有! 本以为安装很简单,mac下都自带ruby,使用ruby的gem命令即可下载安装: $ sudo gem install cocoapo ...

  6. Java中的基本数据类型

    什么是基本数据类型 就是我们在编程的时候经常需要用到的数据类型,如整型,浮点型等,把这些数据类型专门拿出来特殊对待,并想象成所谓的“基本类型”. Java中有哪些基本数据类型

  7. SQL Tune Report–sqltrpt.sql

    ORACLE 10g提供了一个脚本sqltrpt.sql用来查询最耗费资源的SQL语句,其输出的结果分为两部分: 15 Most expensive SQL in the cursor cache 1 ...

  8. INBOUND_CONNECT_TIMEOUT与SQLNET.INBOUND_CONNECT_TIMEOUT小结

    关于sqlnet.ora的参数SQLNET.INBOUND_CONNECT_TIMEOUT,它表示等待用户认证超时的时间,单位是秒,缺省值是60秒,如果用户认证超时了,服务器日志alert.log显示 ...

  9. Learning The Bash Shell读书笔记（整理）

    最近搞了一本书 Learning Bash Shell,发现有人已经写了阅读笔记,我就在这边整理一下 来自blog:http://blog.sina.com.cn/n4mine Learning Th ...

  10. AngularJS 拦截器

    在需要进行身份验证时,在请求发送给服务器之前或者从服务器返回时对其进行拦截,是比较好的实现手段. 例如,对于身份验证,如果服务器返回401状态码,将用户重定向到登录页面. AngularJS通过拦截器 ...