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相对定位 相对定位是一个非常容易掌握的概念,如果对一个元素进行相对定 ...
随机推荐
- iOS开发常用小技巧记录（持续更新）
以下问题都是自己在项目中遇到的,解决问题的方法肯定有多种,我所列举的不一定就是最好的解决办法.如有问题欢迎大家指正,补充,交流. 解决同时按两个按钮进两个view的问题.[button setExcl ...
- iOS 申请测试用的远程推送证书
进入member center创建一个App ID 注意下面证书名字的变化 将刚刚生成的两个证书下载下来,双击安装 安装完成后可以在钥匙串中查看 这样远程推送证书的申请流程就走完了
- iOS 9 升级过程汇中白苹果 iPhone或iPad 解决方案
最近想必有很多朋友升级了iOS 9,不过有部分朋友在升级过程中遇到了白苹果问题.也就是卡在升级过程中,不限重启.这时,你只能通过dfu进行升级了. ios9怎么进入dfu模式: 1.将你的iPhone ...
- 怎么样使用yum来安装、卸载jdk
安装好的CentOS会自带OpenJdk,用命令 java -version ,会有下面的信息: java version "1.6.0"OpenJDK Runtime Envi ...
- Getting Started with ASP.NET Web API 2 (C#)
By Mike Wasson|last updated May 28, 2015 7556 of 8454 people found this helpful Print Download Com ...
- ADDM Reports bug:Significant virtual memory paging was detected on the host operating system
查看ADDM(数据库版本为ORACLE 10.2.0.5.0)报告时,发现其中有个结论非常不靠谱:Significant virtual memory paging was detected on t ...
- 利用iframe实现无刷新上传处理
继上一篇对上传异常进行处理之后,当上传异常的时候的错误体验并不是很好,这里介绍用iframe来进行错误提示 拦截错误 @ExceptionHandler(MaxUploadSizeExceededEx ...
- HTML基础（二）——表单，图片热点，网页划区和拼接
一.表单 <form id="" name="" method="post/get" action="负责处理的服务端&qu ...
- DDL触发器的应用
一般来说,DML触发器可以监测得到具体对象的具体数据的变更.然而,DDL触发器则能够对一些服务器的行为作出监控,比如我们可以利用DDL触发器来做登录限制啊,做一些日志控制啊之类的. 好,然后简单粗暴上 ...
- MySQL binlog 组提交与 XA(两阶段提交)
1. XA-2PC (two phase commit, 两阶段提交 ) XA是由X/Open组织提出的分布式事务的规范(X代表transaction; A代表accordant?).XA规范主要定义 ...