当前位置：文档之家 › html 字体的设置

html 字体的设置

  • 格式：doc
  • 大小：42.50 KB
  • 文档页数：2

2 字体的设置
在css中使用font属性集对字体的风格，大小，亮度等进行设置，下面我们开始学习它们。

一字体风格 font-style
font-style属性用于字体显示的风格。

说明：
(1)inherit 继承，表示该属性从父标签中继承而来。

(2)italic 斜体，表示使用斜体显示文字。

(3)normal 正常，为默认值。

(4)oblique 偏斜体，表示有点倾斜但不大。

示例1 t1.htm
二字体变化 font-variant
font-variant属性用于指定英文字体在打印时的大小对比。

说明：
(1)normal 表示打印时大写字母没变化。

(2)small-caps 表示打印时大写字母比通常小一点。

(3)inherit 表示该属性从父标签中继承而来。

示例2 t2.htm
三字体亮度 font-weight
语法：{font-weight:100-900|bold|bolder|lighter|normal}
说明：浏览器默认的字体粗细为400。

(1)bold 表示黑体字(相当于数值700 )
(2)bolder 表示比黑体还要黑的字
(3)lighter 表示比黑体颜色要浅
(4)normal 正常体(相当于数值400)
(5)可以指定100-900之间的3位整数,100表示最亮,400表示正常
示例3 t3.htm
四字体大小 font-size
font-size属性用来指定字体的相对或绝对大小。

说明：字体大小使用数值设置也可以使用比例
(1)medium 标准字体大小
(2)small 比父字体小一号的字
(3)x-small 比small小1.2倍的字
(4)xx-small 比x-small小1.2倍的字
(5)large 比父字体大一号的字
(6)x-large 比large大1.2倍的字
(7)xx-large 比x-large大1.2倍的字
(8)整数＋"符号单位",符号单位有：象素px，点数pt，英寸in，毫米mm等
(9)整数+%,表示当前字体大小是父字体大小的百分比
示例4 t4.htm
五字型设置 font-family
字体类型
说明：
(1) 当指定了字体类型时，浏览器将调用客户端字体
(2 )当指定了多种字体时，浏览器会安顺序进行搜索，如果没有搜索到，就使用默认字体。

示例5 t5.htm
六字体颜色 color
语法：{color: 数值}
作用：字体颜色
说明：颜色参数取值范围
·以RGB值表示如：#ff0000
·以默认颜色的英文名称表示如red
示例6 t6.htm
七复合属性设置 font
可以使用font参数对一个标签进行复合属性设置。

标签{font:italic 30pt 楷体_gb2312}
示例6 t7.htm。

合集下载

Html常用字体

Html常用字体

例3（加网 ）：font: 14px/1.5 'Microsoft YaHei',arial,tahoma,\5b8b\4f53,sans-serif;
例4（淘宝UED）：font: 12px/1 Tahoห้องสมุดไป่ตู้a,Helvetica,Arial,"\5b8b\4f53",sans-serif;
例5（一淘UX）:font-family: Helvetica, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', Arial, sans-serif;
博客园 用户登录 代码改变世界 密码登录 短信登录 忘记登录用户名 忘记密码 记住我 登录 第三方登录/注册 没有账户, 立即注册
Html常 用 字 体
例1（小米米官网）：font-family: "Arial","Microsoft YaHei","黑体","宋体",sans-serif;
例2（淘宝技术研发中心）：font: 12px/1.5 Tahoma,Helvetica,Arial,'宋体',sans-serif;
font: 12px/1 Tahoma,Helvetica,Arial,"\5b8b\4f53",sans-serif;
另外：
HTML，CSS，font-family：中文字体的英文名称
宋体 SimSun 黑体 SimHei 微软雅黑 Microsoft YaHei 微软正黑体 Microsoft JhengHei 新宋体 NSimSun 新细明体 PMingLiU 细明体 MingLiU 标楷体 DFKai-SB 仿宋 FangSong 楷体 KaiTi 仿宋_GB2312 FangSong_GB2312 楷体_GB2312 KaiTi_GB2312
HTML（5）常用的格式标签

HTML（5）常用的格式标签

HTML（5）常⽤的格式标签⼀、基本⽂字格式1.标题<h></h> HTML定义<h1></h1>到<h6></h6>六个<h>标签，分别⽤来不同⼤⼩字体的标题（Heading）。

字体由⼤到⼩，<h1>最⼤，<h6>则最⼩。

Heading标签需要注意的是：a.浏览器会⾃动地在标题的前后添加空⾏。

因为Heading标签属于块级元素，⽽在默认情况下，HTML 会⾃动地在块级元素前后添加⼀个额外的空⾏（<br/>）。

b.标题对整个页⾯来说很重要,应该将HTML heading 标签只⽤于标题，⽽不要仅仅是为了产⽣粗体或⼤号的⽂本⽽使⽤标题。

因为Heading标签对SEO是很友好的，搜索引擎使⽤标题为您的⽹页的结构和内容编制索引，⽽且⽤户则以通过标题来快速浏览您的⽹页，所以⽤标题来呈现⽂档结构是很重要的。

应该将 <h1> ⽤作主标题（最重要的），其后是 <h2>（次重要的），再其次是 <h3>，以此类推。

1<!--<h>标签是设置标题的，把重要的信息放在<h1>⾥⾯，搜索引擎会优先搜索-->2<h1>3中国⼀</h1>4<h2>5中国⼆</h2>6<h3>7中国三</h3>8<h4>9中国四</h4>10<h5>11中国五</h5>12<h6>13中国六</h6> 效果如下图，字体⼤⼩由⼤到⼩：2.换⾏<br/>、不换⾏<nobr></nobr>和分段<p></p> 关于HTML中的换⾏标签<br/>和分段标签<p></p>的区别是，换⾏标签<br/>只是回车，<p></p>则是分段。

html超链接的格式设置

html超链接的格式设置

html ‎超链接的格‎式设置‎H TML中‎怎么设置超‎链接字体颜‎色和点击后‎的字体颜色‎，需要具体‎的代码。

‎定义链‎接样式‎CSS为‎一些特殊效‎果准备了特‎定的工具，‎我们称之为‎“伪类”。

‎其中有几项‎是我们经常‎用到的，下‎面我们就详‎细介绍一下‎经常用于定‎义链接样式‎的四个伪类‎，它们分别‎是：‎ :l‎i nk‎ :v‎i site‎d‎:hov‎e r‎ :ac‎t ive‎因为‎我们要定义‎链接样式，‎所以其中必‎不可少的就‎是超级链接‎中的锚标签‎--a，锚‎标签和伪类‎链接起来书‎写的方法就‎是定义链接‎样式的基础‎方法，它们‎的写法如下‎：‎ a:l‎i nk，定‎义正常链接‎的样式；‎ a‎:visi‎t ed，定‎义已访问过‎链接的样式‎；‎a:ho‎v er，定‎义鼠标悬浮‎在链接上时‎的样式；‎ a‎:acti‎v e，定义‎鼠标点击链‎接时的样式‎。

示例‎：a:‎l ink ‎{‎colo‎r:#FF‎0000;‎‎t ext-‎d ecor‎a tion‎:unde‎r line‎;‎}‎ a:v‎i site‎d {‎ co‎l or:#‎00FF0‎0;‎ tex‎t-dec‎o rati‎o n:no‎n e;‎ }‎ a‎:hove‎r {‎ co‎l or:#‎00000‎0;‎ tex‎t-dec‎o rati‎o n:no‎n e;‎ }‎ a‎:acti‎v e {‎ c‎o lor:‎#FFFF‎F F;‎ te‎x t-de‎c orat‎i on:n‎o ne;‎ }‎上面示‎例中定义的‎链接颜色是‎红色，访问‎过后的链接‎是绿色，鼠‎标悬浮在链‎接上时是黑‎色，点击时‎的颜色是白‎色。

‎如果‎正常链接和‎已访问过的‎链接样式相‎同，鼠标悬‎浮和点击时‎的样式相同‎，也可以将‎它们合并起‎来定义：‎a:li‎n k,‎ a:‎v isit‎e d ‎ {‎ co‎l or:#‎F F000‎0;‎ tex‎t-dec‎o rati‎o n:un‎d erli‎n e;‎ }‎‎ a‎:hove‎r,‎ a:a‎c tive‎ {‎‎c olor‎:#000‎000;‎ t‎e xt-d‎e cora‎t ion:‎n one;‎‎}链接‎定义的顺序‎没有‎规矩不成方‎圆，虽然链‎接定义写好‎了，但它也‎是有规则的‎，如果这四‎项的书写顺‎序稍有差错‎，链接的效‎果可能就没‎有了，所以‎每次定义链‎接样式时务‎必确认定义‎的顺序，l‎i nk--‎v isit‎e d--h‎o ver-‎a ctiv‎e，也就是‎我们常说到‎的LoVe‎HAte‎原则（大写‎字母就是它‎们的首字母‎）。

富文本font标签使用

富文本font标签使用

富文本font标签使用1. face属性：用于设置字体名称。

可以指定多个字体名称作为备选，浏览器会按照顺序依次选择可用的字体。

2. color属性：用于设置字体颜色。

可以使用颜色名称、十六进制颜色值或RGB值来指定颜色。

3. size属性：用于设置字体大小。

可以使用相对大小（如“+1”、“-2”）或绝对大小（如“12px”、“14pt”）来指定。

```html<p><font face="Arial, Helvetica, sans-serif" color="red"size="4">这是一段红色的Arial字体的文本，字号为4、</font> </p>```在上面的例子中，文本的字体设置为Arial、Helvetica或sans-serif中的一个，颜色设置为红色，字号为4```html<style>.red-textfont-family: Arial, Helvetica, sans-serif;color: red;font-size: 24px;}</style><p class="red-text">这是一段红色的Arial字体的文本，字号为24像素。

</p>```在上面的例子中，通过定义一个名为.red-text的CSS类，将字体设置为Arial、Helvetica或sans-serif中的一个，颜色设置为红色，字号设置为24像素。

然后，通过添加class属性并指定red-text类，来应用这个样式。