`

css font字体的属性

    博客分类:
  • css
css 
阅读更多
border-radius:25px; 增加圆角边框
vertical-align:middle; 垂直对齐一幅图像;
border:1px solid red; 修改边框宽度 ,实线(虚), 颜色

 

css字体样式(Font Style)是网页中不可或缺的样式属性之一,有了字体样式,我们的网页才能变得更加美观,因此字体样式属性也就成为了每一位设计者必需了解的知识。以下是我精心整理的css字体样式属性知识,供大家学习参考:

css文本样式

序号 中文说明 标记语法
1 字体样式 {font:font-style font-variant font-weight font-size font-family}
2 字体类型 {font-family:"字体1","字体2","字体3",...}
3 字体大小 {font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
4 字体风格 {font-style:inherit|italic|normal|oblique}
5 字体粗细 {font-weight:100-900|bold|bolder|lighter|normal;}
6 字体颜色 {color:数值;}
7 阴影颜色 {text-shadow:16位色值}
8 字体行高 {line-height:数值|inherit|normal;}
9 字 间 距 {letter-spacing:数值|inherit|normal}
10 单词间距 {word-spacing:数值|inherit|normal}
11 字体变形 {font-variant:inherit|normal|small-cps }
12 英文转换 {text-transform:inherit|none|capitalize|uppercase|lowercase}
13 {font-size-adjust:inherit|none}
14 {font-stretch:condensed|expanded|extra-condensed|extra-expanded|inherit|narrower|normal| semi-condensed|semi-expanded|ultra-condensed|ultra-expanded|wider}


1. 字体样式:font

语法:{font:font-style font-variant font-weight font-size font-family}
[ <字体风格> || <字体变形> || <字体加粗> ]? <字体大小> [ / <行高> ]? <字体类形>
作用:简写属性,提供了对字体所有属性进行设置的快捷方法。
注意:字体样式用作不同字体属性的略写,特别是行高。例如 P { font: italic bold 12pt/14pt Times, serif }指定该段为bold(粗体)和italic(斜体)Times或serif字体,12点大小,行高为14点。
例子:字体字体

2. 字体类形:font-family

语法:{font-family:字体1,字体2,字体3,...}
作用:调用客户端字体
说明:
·当指定多种字体时,用","分隔每种字体名称。
·当字体名称包含两个以上分开的单词时,用""把该字体名称括起来。
·当样式规则外已经有""时,用''代替""。
注意:如果在font-family后加上多种字体的名称,浏览器会按字体名称的顺序逐一在用户的计算机里寻找已经安装的字体,一旦遇到与要求的相匹配的字体,就按这种字体显示网页内容,并停止搜索;如果不匹配就继续搜索,直到找到为止,万一样式表里的所有字体都没有安装的话,浏览器就会用自己默认的字体来替代显示网页的内容。
例子:{font-family:黑体,隶书;}  字体类型

3.字体大小:font-size

语法:{font-size:数值|inherit| medium| large| larger| x-large| xx-large| small| smaller| x-small| xx-small}
作用:设定文字大小
说明:使用比例关系
·xx-small
·x-small
·small
·medium
·large
·x-large
·xx-large

例子:{font-size:18pt;}  字体大小

4. 字体风格:font-style

语法:{font-style:inherit|italic|normal|oblique}
作用:使文本显示为扁斜体或斜体等表示强调
说明:
·inherit 继承
·italic 斜体
·normal 正常
·oblique 偏斜体

5.字体粗细:font-weight

语法:{font-weight:100-900|bold|bolder|lighter|normal;}
作用:设定文字的粗细
说明:
·bold 粗体(相当于数值700 )
·bolder 特粗体
·lighter 细体
·normal 正常体(相当于数值400)
注意:取值范围从数字100~900,浏览器默认的字体粗细为400。另外可以通过参数lighter和bolder使得字体在原有基础上显得更细或更粗些。

6. 字体颜色:color

语法:{color: 数值}



作用:字体颜色
说明:颜色参数取值范围
·以RGB值表示
·以16进制(hex)的色彩值表示
·以默认颜色的英文名称表示
注意:以默认颜色的英文名称表示无疑是最为方便的,但由于预定义的颜色种类太少,所以更多的网页设计者喜欢用RGB的方式。RGB方式的好处很多,不但可以用数字的形式精确地表示颜色,而且也是很多图像制作软件(如Photoshop)里默认使用的规范,这样一来就为图片和网页更好地结合打下了坚实的基础。


7. 文字阴影颜色:text-shadow

语法:{text-shadow:16位色值}
说明:好像不起作用?
例子:中国中国

8. 字体行高 

语法:{line-height:数值|inherit|normal}
作用:行与行之间的距离
说明:取值范围
·不带单位的数字:以1为基数,相当于比例关系的100%
·带长度单位的数字:以具体的单位为准
·比例关系
注意:行距是指上下两行基准线之间的垂直距离。一般地说,英文五线格练习本,从上往下数的第三条横线就是计算机所认为的该行的基准线。如果文字字体很大,而行距相对较小的话,可能会发生上下两行文字互相重叠的现象。

9. 字 间 距:letter-spacing 

语法:{letter-spacing:数值|inherit|normal} 作用:控制文本元素字母间的间距,所设置的距离适用于整个元素。 注意:数值 - 设置字间距长度,正值表示加进父元素中继承的正常长度,负值则減去正常长度。在数字后指定度量单位:ex(小写字母x的高度), em(大写字母M的宽度)。
例子: 中国china   中国china

10. 单词间距:word-spacing 

语法:{word-spacing:数值|inherit|normal}
说明:单词间距指的是英文每个单词之间的距离,不包括中文文字。间隔距离的取值:points、em、pixes、in、cm、mm、pc、ex、normal等。

11. 字体变形:font-variant 

语法:{font-variant:inherit|normal|small-cps
作用:用于正常和小型大写字母间切换(比正常大写字母略小)
说明:small-caps 小型大写字母

12. 字母大小写转换:text-transform 

语法:{text-transform:inherit|none|capitalize|uppercase|lowercase}
作用:设置一个或几个字母的大小写标准。
说明:
·none 不改变文本的大写小写。
·capitalize 元素中毎个单词的第一个字母用大写。
·uppercase 将所有文本设置为大写。
·lowercase 将所有文本设置为小写。
例子: CHINA ABCD CHINA ABCD

13. font-size-adjust 

语法:{font-size-adjust:inherit|none}
定义用法:font-size-adjust 属性为某个元素规定一个 aspect 值,这样就可以保持首选字体的 x-height。
说明:字体的小写字母 "x" 的高度与 "font-size" 高度之间的比率被称为一个字体的 aspect 值。当字体拥有高的 aspect 值时,那么当此字体被设置为很小的尺寸时会更易阅读。举例:Verdana 的 aspect 值是 0.58(意味着当字体尺寸为 100px 时,它的 x-height 是 58px )。Times New Roman 的 aspect 值是 0.46。这就意味着 Verdana 在小尺寸时比 Times New Roman 更易阅读。

14. font-stretch 

语法:{font-stretch:condensed | expanded | extra-condensed | extra-expanded | inherit | narrower | normal |
    semi-condensed | semi-expanded | ultra-condensed | ultra-expanded | wider}
定义用法:font-stretch 属性可对当前的 font-family 进行伸缩变形。
所有主流浏览器都不支持 font-stretch 属性。

 

分享到:
评论

相关推荐

    Web前端与移动开发之css字体属性.txt

    1.font-family 文本的字体 选择器 { font-family: 字体1,字体2,字体3; } 各个字体之间必须用英文状态下的逗号隔开 尽量使用默认字体 以保证不同浏览器能正确显示 一般整个页面使用同一字体 写在body后面 ...

    html css led字体包

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

    css通用缩写语法总结(font字体篇)

    CSS 缩写语法是CSS3中提高代码效率和可读性的重要特性,它允许开发者用更简洁的方式定义多个样式属性。在本文中,我们将重点讨论有关`font`、`margin`、`padding`以及`border`的缩写规则。 首先,让我们详细探讨`...

    web开发中的CSS字体属性设置.docx

    CSS 字体属性设置 在 Web 开发中,CSS 字体属性设置是非常重要的一部分。它可以帮助开发者美化网页的外观,提高用户体验。本文将详细介绍 CSS 字体属性的设置,包括字体系列、字体风格、字体加粗、字体大小等。 ...

    CSS字体属性全解析

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

    CSS3 @font-face网页中的字体

    【CSS3 @font-face网页中的字体】 在网页设计中,字体的选择对于页面的视觉效果有着至关重要的作用。CSS3引入的`@font-face`规则,让网页设计师能够使用非系统默认的字体,从而打破传统浏览器对字体的限制,提供更...

    CSS3 字体特效

    CSS3还支持图标字体库,如Font Awesome或Ionicons,它们通过CSS类实现图标显示,可以与文本混合使用,丰富网页元素的表现形式。 8. **多列布局(column-count)** 虽非直接的字体特效,但`column-count`属性可以...

    XML应用开发(软件品牌)-1期 4.4 课堂实践-使用CSS文本属性显示XML文档-字体属性font.doc

    在处理XML文档时,我们需要为XML元素添加CSS样式,比如为`&lt;Title&gt;`、`&lt;Type&gt;`、`&lt;Rating&gt;`等元素定义不同的字体属性,以达到清晰、易读的效果。例如: ```css Title { font: italic bold 24px 'Arial', sans-serif...

    CSS 字体属性详解及其应用技巧

    本文档详述了 CSS 中与字体相关的多种关键样式属性。其中包括 'font' 的组合用法和各独立属性如'font-size','font-family', 'font-weight','font-style','font-variant',和 'line-height' 的解释。同时,它提供了...

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

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

    css属性大全(css的所有属性)

    字体属性涉及元素的文本样式,如`font-family`用于设定字体类型,需考虑浏览器兼容性;`font-size`设置字体大小,可使用各种度量单位;`font-weight`调整字体粗细,有多种预设选项和数值可选;`font-style`定义字体...

    XML应用开发(软件品牌)-1期 4.4 案例分析-使用CSS文本属性显示XML文档-字体属性font.doc

    本案例主要探讨如何利用CSS的文本属性`font`来控制XML文档中元素的字体、大小、样式和行高等视觉表现。我们将深入理解这些属性,并通过具体的案例分析来展示它们的实际应用。 首先,我们来看`font`属性,它是一个...

    css改变字体的一些网页

    一、CSS选择器与字体属性 在CSS中,我们通过选择器来定位要更改样式的元素,比如`p`代表段落,`h1`到`h6`代表不同级别的标题。要改变字体,我们可以使用以下主要的字体属性: 1. `font-family`: 定义字体系列,例如...

    跨平台CSS中文字体解决方案

    首先,我们来理解CSS中的`font-family`属性。这是一个用于设置元素字体的关键属性,其语法如下: ```css font-family: 字体1, 字体2, ... , 字体N, "fallback font"; ``` 这里的字体列表按照优先级排列,浏览器会...

    CSS的字体与文本属性详解

    `font-family` 属性用于指定元素的字体系列,是基本也是最常见的字体属性。例如: ```css body { font-family: Arial, sans-serif; } ``` 在这个例子中,正文文本将首先尝试使用Arial字体,如果当前环境下...

    font-awesome-ie7.min.css_fontawesome-4.2.0

    在这些老版本的IE中,很多现代CSS特性如`:before`和`:after`伪元素、`content`属性等无法正常工作,这使得Font Awesome 的矢量图标无法正常显示。`font-awesome-ie7.min.css`通过替代的CSS规则和技术,使这些图标...

    如何用css设置网页字体

    6. **总体字体属性(`font`)** - **功能**:这是一个简写属性,可以一次性设置多个字体相关的属性。 - **属性值**:按顺序分别为`font-style`、`font-variant`、`font-weight`、`font-size`、`line-height`、`...

    CSS3服务器字体文件和相关demo

    这里,`font-family`定义了一个自定义字体名,`src`属性则指定了字体文件的URL和格式。 3. **应用字体**:一旦定义了@font-face规则,就可以在任何元素上使用新定义的字体,如: ```css body { font-family: '...

    css font 属性的快捷写法

    `font`属性的快捷写法是将多个单独的字体属性合并为一个单一的声明,包括`font-style`、`font-variant`、`font-weight`、`font-size`、`line-height`和`font-family`。 首先,我们来看一下`font`属性的完整语法: ...

Global site tag (gtag.js) - Google Analytics