`
Dream丶AL
  • 浏览: 22103 次
  • 性别: Icon_minigender_1
文章分类
社区版块
存档分类
最新评论

CSS 字体

阅读更多

字体风格

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

该属性有三个值:

    normal - 文本正常显示

    italic - 文本斜体显示

    oblique - 文本倾斜显示  

 

例:

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 浏览器中看上去完全一样。

 

字体变形

font-varianth属性可以设定小型大写字母。

小型大写字母不是一般的大写字母,也不是小写字母,这种字母采用不同大小的大写字母。

p {font-variant:small-caps;}

 

 

字体加粗

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

使用 bold 关键字可以将文本设置为粗体。

100 ~ 900 为字体指定了 9 级加粗度。如果一个字体内置了这些加粗级别,那么这些数字就直接映射到预定义的级别,100 对应最细的字体变形,900 对应最粗的字体变形。数字 400 等价于 normal, 700 等价于 bold。

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

 

 

字体大小

font-size属性设置文字大小

h1 {font-size:60px;}
p {font-size:14px;}

 

分享到:
评论

相关推荐

    CSS文字组成肖像插图网页特效.rar

    通过CSS,我们可以控制网页元素的颜色、字体、布局、动画等视觉表现,使网页更具美化和交互性。 2. 文字图形化:这是一种将文字作为设计元素,通过调整文字的大小、颜色、位置、旋转、透明度等属性,使其组合成图像...

    几款酷炫的css3文字动画特效

    在现代网页设计中,CSS3引入了许多新的特性和功能,其中包括对文字动画的支持。在本主题中,我们将深入探讨"几款酷炫的CSS3文字动画特效",以及如何通过Splitting库来实现这些效果。 1. CSS3文字动画基础 CSS3的...

    css3文字颜色渐变和文字阴影特效

    **CSS3文字颜色渐变和文字阴影特效** 在现代网页设计中,CSS3已经成为不可或缺的一部分,它提供了许多新的特性和功能,使得网页的视觉表现力更加强大。本主题聚焦于CSS3中的两个重要特性:颜色渐变和文字阴影,它们...

    CSS文字背景图

    而"CSS文字背景图"这个主题,特别指的是利用CSS技术来为文字添加背景图像或者图标,使得文本更加美观、易读且具有视觉吸引力。在给定的"font-awesome-4.3.0"压缩包中,包含了一套流行的图标库——Font Awesome。 ...

    html css led字体包

    为了在网页上实现LED字体效果,开发者需要在CSS中定义字体的像素化样式,例如通过设置`font-size`、`letter-spacing`和`text-shadow`属性。此外,还可以利用CSS动画或JavaScript来实现闪烁、滚动等动态效果,增强LED...

    css如何去掉h1 h2 h3 h4加粗并统一字体大小.docx

    7. 了解更多 CSS 文字字体加粗方式:CSS 中有多种方式来实现文字加粗,例如使用 font-weight 样式、使用 b 标签、使用 strong 标签等。 8. HTML h1 h2 h3 h4 标题标签:HTML 中的 h1-h4 标题标签用于定义标题,具有...

    css文字导航

    css文字导航,平时练习用的,可以把部分代码删掉来看看的变化效果

    纯CSS3炫酷3D浮雕质感文字动画特效

    另外,"css"目录下可能包含了实现此特效的CSS样式文件,而"fonts"目录则可能存储了用于特殊字体效果的Web字体文件。 总结来说,这个特效充分利用了CSS3的3D变换、过渡和动画特性,创造出引人注目的3D浮雕文字动画,...

    css实现内容逐个输出样式.html

    层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用...CSS不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化. 使用CSS 实现内容逐个输出的效果

    css3文字特效_css3火焰文字_css3文字渐变代码

    本文将深入探讨“CSS3文字特效”,特别是“CSS3火焰文字”以及“CSS3文字渐变代码”的实现方法。 一、CSS3文字特效基础 CSS3文字特效主要依赖于其新增的属性和功能,如文本阴影(text-shadow)、文本描边(text-...

    CSS纵向拉伸或随意放大缩小字体的宽高比例

    首先,我们要明白,常规情况下,CSS中的`font-size`属性用于设置文本的大小,而字体本身的宽度和高度比例(宽高比)是固定的,这使得文字在放大时会按比例缩放,不会出现明显的拉伸效果。但如果我们想要实现纵向拉伸...

    [CSS] CSS 字体设置教程 (英文版)

    [奥莱理] CSS 字体设置教程 (英文版) [奥莱理] CSS Fonts (E-Book) ☆ 出版信息:☆ [作者信息] Eric A. Meyer [出版机构] 奥莱理 [出版日期] 2013年07月30日 [图书页数] 68页 [图书语言] 英语 [图书格式] ...

    css文字阴影.html

    文字阴影效果shadow,外发光,辉光,投影,浮雕,模糊,模糊的浮雕,影子,描边,3D,Vintage-retro效果,文字效果补色效果三维效果图

    css3文字上下滚动切换特效.zip

    2. **CSS样式**:设置文字的基本样式,如颜色、字体大小等。然后,使用CSS3的`animation`或`transition`属性来定义文字滚动动画。例如: ```css @keyframes scrollUp { 0% { transform: translateY(0); } 100% ...

    CSS字体属性全解析

    话说CSS字体属性font-family、font-style、font-size、font-weight、font-variant: 使用CSS,可以对字体进行设置,字体属性包括五种常见属性:字体系列font-family、字体样式/字体风格font-style、字体大小font-...

    动画库animate.css文字特效.zip

    这个压缩包“动画库animate.css文字特效.zip”显然包含了专门针对文字特效的Animate.css样式。以下是对这些知识点的详细解释: 1. **CSS动画**:CSS动画是通过CSS3中的`@keyframes`规则创建的,它允许在元素的不同...

    CSS3荧光灯文字闪烁动画特效

    **CSS3荧光灯文字闪烁动画特效详解** 在现代网页设计中,动态效果常常被用来增强用户体验和视觉吸引力。CSS3作为 Cascading Style Sheets 的第三个版本,提供了许多强大的功能,其中包括丰富的动画效果。本篇文章将...

Global site tag (gtag.js) - Google Analytics