HTML 学习笔记 CSS样式（字体）
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样式（字体）的更多相关文章
- HTML 学习笔记 CSS样式（简介和语法）
CSS概述 CSS指层叠样式表(Cascading Style Sheets) 样式定义如何显示HTML元素 样式通常存储在样式表中 把样式添加到HTML4.0中 是为了解决内容与表现分离的问题 外部 ...
- HTML 学习笔记 CSS样式（定位）
CSS定位(Positioning)属性 允许你对元素进行定位. CSS定位和浮动 CSS为定位和浮动提供了一些属性,利用这些属性 可以建立列式布局,将布局的一部分与另一部分重叠.还可以完成多年来通常 ...
- HTML 学习笔记 CSS样式（边框）
元素的边框(border)是围绕元素内容和内边距的一条或多条线 CSS border 属性允许你规定边框的样式 宽度和颜色 CSS 边框 在 HTML 中,我们使用表格来创建文本周围的边框,但是通过使 ...
- HTML 学习笔记 CSS样式（框模型）
CSS框模型( Box Model)规定了元素框处理元素的内容 内边距 边框 和 外边距的方式 CSS框模型概述 可以用下面的模型图概述
- HTML 学习笔记 CSS样式（链接）
我们能够以不同的方法为链接设置样式. 设置链接的样式 能够设置链接样式的 CSS 属性有很多种(例如 color, font-family, background 等等).链接的特殊性在于能够根据它们 ...
- HTML 学习笔记 CSS样式（文本）
CSS文本属性可以定义文本的外观 通过文本属性 您可以改变文本的颜色 字符间距 文本对齐装饰文本 对文本进行缩进等等. 缩进文本 把web页面上的段落的第一行缩进,这是最常用的文本格式化效果. css ...
- 前端学习笔记--CSS样式--文本
1.文本与文字样式主要的属性: 子标签可以继承父标签的样式: 关于颜色: 文本属性: letter-spacing: line-height: text-align: 字体:
- 学习笔记 css样式
大小 width:宽度 height:高度 背景 background-color 背景色 background-image 背景图片 background-repeat 背景平铺 ...
- HTML 学习笔记 CSS样式（相对定位 绝对定位）
CSS相对定位 设置为相对定位(relative)的元素会偏移某个距离.元素仍保持其未定位前的形状,他原本所占的空间仍然保留 CSS相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
随机推荐
- eclipse出现感叹号的解决办法
当eclipse导入项目出现红叉但无提示错误时,去看:1>菜单路径----Window/Show View/Console2>菜单路径----Window/Show View/Error ...
- Java你可能不知道的事(3)HashMap
概述 HashMap对于做Java的小伙伴来说太熟悉了.估计你们每天都在使用它.它为什么叫做HashMap?它的内部是怎么实现的呢?为什么我们使用的时候很多情况都是用String作为它的key呢?带着 ...
- SQL server 2014安装以及解决连接数据库失败问题
安装教程:http://jingyan.baidu.com/article/3a2f7c2e653d5926afd61197.html 安装好之后打开SQL server 2014 Managemen ...
- git技巧记录--子模块删除方法
把子模块推进去了,删掉吧(将子模块删除,然后提交推送),删除子模块步骤: 1.在Platform.Web库下,右键->Git Bash,进入git命令行窗口,输入:git rm –-cached ...
- yii2 gridview 是否显示某列案例
作者:白狼 出处:http://www.manks.top/article/yii2_gridview_visible 本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给 ...
- Asp.net MVC的Model Binder工作流程以及扩展方法(1) - Custom Model Binder
在Asp.net MVC中, Model Binder是生命周期中的一个非常重要的部分.搞清楚Model Binder的流程,能够帮助理解Model Binder的背后发生了什么.同时该系列文章会列举 ...
- iOS 导航栏实现总结
目标: 在UI界面中实现 整体效果的导航栏, 比如1 首页无导航条,次页有导航条, 2 导航条中不包含下方不包含黑边 3 导航条包含多个筛选项 等等 问题: 用系统带的NavigateBar 来实现时 ...
- SQL Server 2012实施与管理实战指南(笔记)——Ch4数据库连接组件
4.数据库连接组件 访问数据库有多种不同的技术,包括ADO,ODBC,OLEDB,ADO.NET等这些都有一些共性.首先要建立连接(Connection),然后通过命令(Command)对数据库进行访 ...
- JSP在动态网页上输出 三角形和菱形
三角形输出: <% StringBuffer sb1 = new StringBuffer(); ; i <= ; i++){ ; j <= i; j++){ sb1.append( ...
- 【hadoop】——MapReduce解压缩实现
转载请注明出处:http://www.cnblogs.com/zhengrunjian/p/4527269.html 1作为输入 当压缩文件做为mapreduce的输入时,mapreduce将自动通过 ...