3.CSS字体属性
CSS Fonts(字体)属性用定义字体系列,大小粗细,和文字样式(如斜体)
3.1字体系列
CSS使用font-family属性定义文本字体系列
p { font-family:'微软雅黑' ;}
div {font-family: 'Microsoft Yahei', '微软雅黑' ; }
注意:各种字体之间必须用英文状态下的逗号隔开
一般情况下,如果有空格隔开的多个单词组成的字体,加引号。
尽量使用系统默认子弟字体,保证在任何用户的浏览器都能正确显示。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>字体属性之字体系列</title>
<style>
h2 {
font-family: '微软雅黑';
};
p {
font-family: 'Times New Roman', Times, serif;
}
</style>
</head>
<h2>pink的秘密</h2>
<P>卢本伟牛逼</P>
<p>卢本伟牛逼</p>
</body>
</html>
3.2字体大小
CSS使用font-size属性定义字体大小
p {
font-size: 20px;
}
注意:px(像素)大小是我们网页最常用的单位
谷歌浏览器默认文字大小为16px
可以给整个body指定整个页面文字的大小
标题具有特殊性需要单独指定文字大小。
代码实例:
3.3字体的粗细
CSS使用font-weight属性设置文本字体的粗细。
p{
font-weight:bold;
}
属性值 | 描述 |
normal | 默认值(不加粗的) |
bold | 定义粗体(加粗的) |
100-900 | 400等同于normal,而700等同于bold 注意数字后面不能加数字 |
注意:学会让粗标签(如h和strong等)不加粗,或者其他标签加粗
在实际开发中我们喜欢用数字
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS字体粗细</title>
<style>
.bold {
/* font-weight:bold */
/* 这个700的后面不要给单位 等价于bold都是加粗的效果 */
/* 在实际开发中我们提倡使用数字 表示加粗或者变细 */
font-weight: 700;
}
h2 {
font-weight: 400;
/* font-weight: normal;实际开发中用数字 */
}
</style>
</head>
<body>
<h2>pink的秘密</h2>
<p>优雅淡然</p>
<p class="bold">前端必胜</p>
</body>
</html>
3.4文字样式
CSS使用font-style属性设置文本风格。
p {
font-style: normal;
}
属性值 | 作用 |
normal | 默认值,浏览器会显示标准的字体样式 font-style:normal |
italic | 浏览器会显示斜体的字体样式 |
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>css字体属性之文字样式</title>
<style>
p {
font-style: italic;
}
em {
/* 让倾斜的字体不倾斜 赶紧脉动起来 */
font-style: normal;
}
</style>
</head>
<body>
<p>同学,上课时候的你</p>
<em>下课时候的你</em>
</body>
</html>
3.5字体复合属性
字体属性可以把以上文字样式综合来写,这样可以节约代码:
body {
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>复合属性</title>
<style>
/* 想要div倾斜 加粗 字号设置为16像素 并且微软雅黑 */
div {
/* font-style: italic;
font-weight: 700;
font-size: 16px;
font-family: 'Microsoft yahei';
line-height: normal; */
/* 复合属性:简写的方式 节约代码 */
/* 必须严格按照一下循序: */
/* font: font-style font-weight font-size/line-height font-family; */
font: italic 700 16px 'MicroSoft yahei';
}
</style>
</head>
<body>
<div>三生三世十里桃花</div>
</body>
</html>
3.6字体属性小结
属性 | 表示 | 注意点 |
font-size | 字号 | 我们通常用的单位是px像素,一定要跟上单位 |
font-family | 字体 | 实际工作中按照团队约定来写字体 |
font-weight | 字体粗细 | 记住加粗是700或者bold 不加粗是normal或者400 记住数字不要跟单位 |
font-style | 字体样式 | 记住倾斜体是italic 不倾斜是normal 工作中我们常用normal |
font | 字体连写 | 1字体连写是有循序的 不能随意换位置的 2.其中字号和字体必须同时出现 |
3.CSS字体属性的更多相关文章
- CSS字体属性大全
文章转自:http://www.10wy.net/Article/CSS/CSS_list_8.html查看更多更专业性的文章请到:网页设计网 CSS字体属性 字体名称属性(font-family) ...
- CSS字体属性
CSS字体属性 CSS Fonts(字体)属性拥有定义字体系列.大小.粗细和文字样式(如斜体) 字体系列 <style type="text/css"> div{ fo ...
- CSS字体属性与文本属性
CSS字体属性与文本属性 1. 字体属性 1.1 字体系列font-family p { font-family: "Microsoft Yahei";/*微软雅黑*/ } /*当 ...
- css字体属性(font)
字体名称属性(font-family) 这个属性设定字体名称,如Arial, Tahoma, Courier等.例句如下: .s1 {font-family:Arial} 字体大小属性(fon ...
- CSS字体属性 font属性
CSS的所有字体属性: ·-· font 在一个声明中设置所有的字体属性 ·-· font-family 指定文本的字体系列 ·-· font-size 指定文本的字体大小 (属性值是整数字, ...
- 所有CSS字体属性
font(在一个声明中设置所有的字体属性) font-family(指定文本的字体系列) font-size(指定文本的字体大小) font-style(指定文本的字体样式) font-variant ...
- css字体属性相关。
出处:CSS 参考手册 http://www.w3school.com.cn/cssref/index.asp text-decoration 属性 说明:这个属性允许对文本设置某种效果,如加下 ...
- 解决谷歌浏览器设置font-family属性不起作用,(css中设置了font-family:没有用)css字体属性没用
嗯,这个问题百思不得解.其他的浏览器器都没问题,在谷歌上就不行,网上找了很多,都没效果,后才发现,当然同样的问题可能错不一样的地方,我的解决方案: 感觉主要原因是自己也没查到,乱改一堆,就OK啦: 1 ...
- CSS(2)---css字体、文本样式属性
css字体.文本样式属性 这篇主要讲CSS文本属性中的:字体样式属性 和 文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
随机推荐
- 求x>0时,y=x^3-6x^2+15的极值
解: 当x→∞时,y也→∞,所以y没有最大值. y=x3-6x2+15=-4*(x/2)*(x/2)*(6-x)+15 而根据几何平均数小于等于算术平均数的定理,(x/2)*(x/2)*(6-x)在x ...
- CF思维联系--CodeForces -214C (拓扑排序+思维+贪心)
ACM思维题训练集合 Furik and Rubik love playing computer games. Furik has recently found a new game that gre ...
- python-函数变量与方法公有、私有整理
关于函数与方法的区别: 函数: def funname(): 括号里面可以有形参,也可以没有,为空 在函数里面的参数整理: 方法: def funcname(self): 括号里面必须有个self,因 ...
- undef用法
#undef的语法 定义:#undef 标识符,用来将前面定义的宏标识符取消定义. 整理了如下几种#undef的常见用法. 1. 防止宏定义冲突在一个程序块中用完宏定义后,为防止后面标识符冲突需要取消 ...
- 70行实现Promise核心源码
70行实现Promise核心源码 前言: 一直以来都是只会调用Promise的API,而且调API还是调用axios封装好的Promise,太丢人了!!!没有真正的去了解过它的原理是如何实现的,自 ...
- 正方形已知两点对角线求另外两点(POJ2002)
至于为什么,上图.转载于MZW_BG 枚举正方形的一条边,此时有上正方形和下正方形. 最后正方形个数/4,因为每个正方形被枚举了4条边 #include <bits/stdc++.h> u ...
- Vue列表实现滚动到指定位置样式改变
这个需求大概是这样子: 我做的一个聊天Demo,在搜索框搜索用户,可以滚动到指定的用户.然后成选中状态. 这是目前状态,我搜索 南宫仆射 ,想要下面的用户列表直接滚动到 南宫仆射 并改变CSS样式. ...
- 给你的Java程序拍个片子吧:jstack命令解析
前言 如果有一天,你的Java程序长时间停顿,也许是它病了,需要用jstack拍个片子分析分析,才能诊断具体什么病症,是死锁综合征,还是死循环等其他病症,本文我们一起来学习jstack命令~ jsta ...
- 【Scala】关于集合的各种知识点
目录 映射Map 不可变Map 概述 操作实例 可变Map 概述 操作实例 Map的遍历 for循环遍历 格式 操作实例 模式匹配遍历 格式 操作实例 Tuple 元祖 概述 定义格式 获取元素方法 ...
- u-boot 移植(二)创建新平台的板级支持
u-boot 移植(二)创建新平台的板级支持 soc:s3c2440 board:jz2440 uboot:u-boot-2016.11 toolchain:gcc-linaro-7.4.1-2019 ...