CSS-Day03-CSS样式-字体

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

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

除了各种特定的字体系列外，CSS 定义了 5 种通用字体系列：

Serif 字体
Sans-serif 字体
Monospace 字体
Cursive 字体
Fantasy 字体

h1 {font-family: Georgia, serif;}
//如果用户代理上没有安装 Georgia 字体，就只能使用用户代理的默认字体来显示 h1 元素

p {font-family: Times, TimesNR, 'New Century Schoolbook',Georgia, 'New York', serif;}

使用引号
您也许已经注意到了，上面的例子中使用了单引号。只有当字体名中有一个或多个空格（比如 New York），或者如果字体名包括 # 或 $ 之类的符号，才需要在 font-family 声明中加引号。
单引号或双引号都可以接受。但是，如果把一个 font-family 属性放在 HTML 的 style 属性中，则需要使用该属性本身未使用的那种引号。

字体风格
font-style 属性最常用于规定斜体文本。

p.normal {font-style:normal;}//文本正常显示
p.italic {font-style:italic;}//文本斜体显示
p.oblique {font-style:oblique;}//文本倾斜显示

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

字体变形

p {font-variant:small-caps;}//font-variant 属性可以设定小型大写字母。

字体加粗
font-weight 属性设置文本的粗细。

//关键字 100 ~ 900 为字体指定了 9 级加粗度
p.normal {font-weight:normal;}//==400
p.thick {font-weight:bold;}//==700
p.thicker {font-weight:900;}//最大值//如果将元素的加粗设置为 bolder，浏览器会设置比所继承值更粗的一个字体加粗。与此相反，关键词 lighter 会导致浏览器将加粗度下移而不是上移。

字体大小
font-size 属性设置文本的大小。

使用像素来设置字体大小:

h1 {font-size:60px;}
h2 {font-size:40px;}
p {font-size:14px;}
//注意：如果您没有规定字体大小，普通文本（比如段落）的默认大小是 16 像素 (16px=1em)。

使用 em 来设置字体大小
如果要避免在 Internet Explorer 中无法调整文本的问题，许多开发者使用 em 单位代替 pixels。(适配)

h1 {font-size:3.75em;} /* 60px/16=3.75em */
h2 {font-size:2.5em;}  /* 40px/16=2.5em */
p {font-size:0.875em;} /* 14px/16=0.875em */

结合使用百分比和 EM
在所有浏览器中均有效的方案是为 body 元素（父元素）以百分比设置默认的 font-size 值：
实例

body {font-size:100%;}
h1 {font-size:3.75em;}
h2 {font-size:2.5em;}
p {font-size:0.875em;}

CSS-Day03-CSS样式-字体相关推荐

CSS非布局样式-字体
本文内容整理于慕课网视频教程对于CSS中的字体属性(font-family),有几个方面的知识需要了解. 一:字体的分类有两个类型的名称可用于分类字体: 字体族名称(family-name) 族类 ...
HTMLCSS Day03 CSS字体及文本样式
文章目录 1.文本属性 - 颜色属性在CSS中如何通过color属性来修改文字颜色英文单词 rgb rgba 十六进制 - font-style 用于打开和关闭斜体文本 - font-weight ...
HTML字体怎么显示,教你如何用CSS来控制网页字体的显示样式
教你如何用CSS来控制网页字体的显示样式更新时间:2007年02月27日 00:00:00 作者: HTML对于<font>内容</font>卷标只有: <font ...
CSS选择器补充，CSS三大特性以及字体、文本样式。
在昨天基础上补充的三个选择器伪元素选择器使用伪元素来表示元素中的一些特殊的位置 ::after 表示元素的最后边的部分一般需要结合content这个样式一起使用, 通过conte ...
HTML标记fort属性最大取值,CSS(2)---css字体、文本样式属性
css字体.文本样式属性这篇主要讲CSS文本属性中的:字体样式属性和文本样式属性. 一.字体样式属性 CSS 字体属性主要包括:字体设置(font-family).字号大小(font-size) ...
CSS基础选择器、字体和文本样式
一.CSS简介美化网页.布局页面 CSS(层叠样式表Cascading Style Sheets)(CSS样式表或级联样式表) 主要用于设置HTML中的文本内容(字体.大小.对齐方式等).图片的外形 ...
CSS样式字体与文本相关属性
CSS样式字体与文本相关属性字体相关属性基本属性添加阴影添加多阴影微调字体大小颜色表示文本相关属性文本基本属性文本自动换行长单词和URL地址换行 CSS3新增服务器字体字体相关属 ...
html代码字号div style=,div字体大小设置 css设置div中字体大小尺寸样式
div字体大小设置 css设置div中字体大小尺寸样式设置篇在css div布局中常常对div字体大小设置,这篇ThinkCSS为大家介绍div中字体大小尺寸样式设置,通过直接在div标签加字体大小 ...
CSS基础(基础选择器+字体文本相关样式)
文章目录目录前言一.css的语法规则二.css引入方式三.基础选择器四.字体和文本样式字体样式文本样式 line-height行高前言层叠样式表(Cascading Style S ...
我的前端学习之CSS基础--选择器、字体、非布局样式、背景
CSS基础选择器半透明,可叠加,第一张的padding,第二张的font-size,第三张的background <style>body{padding :10px; font-siz ...

CSS-Day03-CSS样式-字体

CSS-Day03-CSS样式-字体相关推荐

最新文章

热门文章