`

css字体样式(Font Style),属性

    博客分类:
  • CSS
 
阅读更多

引自:

http://www.jzxue.com/Html/htmlcss/121518233996730.html

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: 数值}

分享到:
评论

相关推荐

    css字体样式(Font Style) 属性

    CSS字体样式是网页设计中用来控制文本外观的关键属性,它允许开发者精确地调整文本的字体、大小、风格、颜色以及更多的视觉效果。以下是对这些属性的详细解释: 1. **字体样式 (Font Style)**: `font` 属性是一个...

    CSS和JavaScript标签style属性对照表

    `font`属性是一组属性的简写,包括`font-family`、`font-size`、`font-style`、`font-variant`和`font-weight`,分别定义字体、字号、风格、变体和粗细。在JavaScript中,这些属性名保持一致,只是大小写不同。 **...

    css(样式表属性)

    - **字体样式(Font Style)**:`font-style` - 示例:`font-style: italic;` 设置字体为斜体。 - **字体变化(Font Variant)**:`font-variant` - 示例:`font-variant: small-caps;` 设置文本中的大写字母为...

    HTML5&CSS3网页制作:字体样式属性.pptx

    4. **font-style属性**:该属性用于定义字体样式,比如设置斜体、倾斜或正常。可选值有`normal`(默认,标准样式)、`italic`(斜体)、`oblique`(倾斜)。`italic`是斜体字,而`oblique`则是倾斜的文本,适用于无...

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

    4.font-style 字体样式 normal正常(不倾斜)/tialic斜体 font-style主要将倾斜的标签em i改为不倾斜 5.字体的复合属性(简写方式 节约代码) body { font: font-style font-weight font-size/line-height ...

    css属性大全 样式表的创建 样式表的属性

    - **字体风格(`font-style`)**:定义字体的样式,可选择`normal`(正常)、`italic`(斜体)或`oblique`(倾斜)。例如: ```css h1 { font-style: oblique; } ``` - **字体变形(`font-variant`)**:用于...

    css基本样式属性大全.pdf

    * 字体样式(font-style):包括normal(正常)、italic(斜体)和oblique(偏斜体)。 * 行高(line-height):可以使用绝对单位或相对单位,也可以使用normal关键字。 * 字体粗细(font-weight):包括normal...

    CSS字体属性全解析

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

    CSS3 @font-face网页中的字体

    `@font-face`是CSS3中的一种样式规则,允许开发者在网页中嵌入自定义字体,这样用户在访问网站时无需在本地安装这些字体也能正常显示。该规则由多个属性组成,包括`font-family`、`src`等,定义了字体家族名称和字体...

    CSS style属性大全.rar

    - `font-style`: 设置字体样式,如`normal`、`italic`或`oblique`。 2. **布局和盒模型** - `width`和`height`: 设置元素的宽度和高度。 - `margin`和`padding`: 控制元素的外边距和内边距,可以单独设置上、右...

    CSS层叠样式表介绍

    - **在标签体内直接定义**:使用元素的`style`属性直接指定样式,如`&lt;td style="font-size:15pt"&gt;`。 - **通过CSS文件调用**:将CSS代码写入单独的文件,然后在HTML中使用`&lt;link&gt;`标签引用,如`&lt;link href="css/...

    CSS_style.rar_jsp css sty_style_style css_style.css

    CSS Style属性包括但不限于:颜色(color)、背景(background)、字体(font)、边框(border)、布局(positioning)、盒模型(box model)、过渡(transition)、动画(animation)等。例如,`color`属性用于...

    JS中的CSS_Style属性标签对照表.docx 含有CSS 的详细属性说明

    下面是对标题和描述中提到的一些CSS Style属性在JS中的详细解释: 1. **边框(Border)属性**: - `border`: 设置所有边框的样式、宽度和颜色。 - `border-bottom`: 设置下边框。 - `border-bottom-color`: 设置...

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

    `font`属性是一个复合属性,它可以合并设置`font-style`、`font-variant`、`font-weight`、`font-size`、`line-height`和`font-family`。例如: ```css p { font: italic normal bold 12pt/18pt 宋体; } ``` 这段...

    CSS和JS标签style属性对照表

    总结来说,这些属性的对比表格为我们提供了从CSS到JavaScript style属性的清晰映射关系,使得开发者能够更方便地通过JavaScript来动态调整元素样式。对于前端开发者而言,了解并掌握这些属性的使用方法是非常重要的...

    常用控件CSS样式

    在网页设计中,CSS(Cascading Style Sheets)是一种至关重要的技术,用于定义HTML或XML(包括SVG、MathML等各种XML方言)文档的呈现。它允许我们控制网页元素的外观,如字体、颜色、布局以及不同设备上的响应式设计...

    js与css样式对照

    ##### 字体样式(Font Style) - **CSS属性**:`font` - **JavaScript属性**:`font` - **CSS属性**:`font-family` - **JavaScript属性**:`fontFamily` - **CSS属性**:`font-size` - **JavaScript属性**:`...

Global site tag (gtag.js) - Google Analytics