CSS样式表一席谈之利用CSS改变字体

t妈丢了你

t妈丢了你

2016-02-19 18:33

清醒时做事,糊涂时读书,大怒时睡觉,无聊时关注图老师为大家准备的精彩内容。下面为大家推荐CSS样式表一席谈之利用CSS改变字体,无聊中的都看过来。

在过去页面上的字体是一成不变的,静静的呆在那。当DHTML(动态网页)出现后,我们能有更多方式控制字体了。一般来说,动态字体的实现核心是CSS(层叠样式表)加JavaScript。使用了以上两项技术后,字体就能产生许多变化。

1.CSS定义字体的标签元素
font-family: 设置字体字族。

span style="font-family: 黑体, 宋体(GB)"田涛/span

font-sytle:设置字体类型。

span style="font-style: normal"田涛/span

font-weight:设置字体的字重。

span style="font-weight: bold"田涛/span

font-size:设置字体大小。

span style="font-size: 14pt"田涛/span

font-decoration:修饰文本字体,比如带下划线“underline”。

span style="text-decoration: underline"田涛/span

  对于以上的字体设置,我们可以采用一个方便的方法:

span style="font:normal bold 14pt 黑体"田涛/span

在style定义的次序是:font-style,font-weight,font-size,font-family.

2.CSS定义字体和font定义字体的冲突

  对于CSS定义字体和font定义字体,我们都要注意以下问题,比如有以下字体设置:

span style="font-family: 宋体(KSC); font-size: 200pt"font田涛/font/span

  这时侯字体大小将以font-size: 200pt的定义来设置。但如果你在font中加入size属性,比如:

span style="font-family: 宋体(KSC); font-size: 200pt"font size="5"田涛/font/span

  这时侯,字体的大小以size的设置为准,font-size: 200pt将不起作用。其它的属性也是一样。如果你无需动态字体,就利用HTML4.0的font来定义字体,需要动态字体时,就需要使用CSS和JavaScritp来定义字体及引发事件。

3.定义CSS字体属性类

  一般我们在制作动态字体时,我们会首先利用CSS定义出页面字体的整个属性,然后在页面中引用,而不用对每段文本进行设置,这也是实现动态字体首先一步。

html

head

style type="text/css"

.tt2 { font-family:"黑体"; font-size: 16px; font-style: normal; line-height: 17px }

/style

/head

body

p class="tt2"田涛/p

/body

/html

  在以上代码中,“田涛”两个字引用了.main_2类定义的字体样式。当然你可以在style/style中定义不同的字体样式,以便页面中根据不同字体加以引用。比如:

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

html

head

style type="text/css"

.tt1 { font-family:"宋体"; font-size: 15px; font-style: normal; }

.tt2 { font-family:"黑体"; font-size: 16px; font-style: normal; }

/style

/head

body

p class="tt1"田涛/p

(本文来源于图老师网站,更多请访问http://m.tulaoshi.com/webkaifa/)

p class="tt2"田涛/p

/body

/html

展开更多 50%)
分享

猜你喜欢

CSS样式表一席谈之利用CSS改变字体

Web开发
CSS样式表一席谈之利用CSS改变字体

CSS样式表一席谈之CSS快速入门

Web开发
CSS样式表一席谈之CSS快速入门

s8lol主宰符文怎么配

英雄联盟 网络游戏
s8lol主宰符文怎么配

CSS样式表一席谈之绝对定位与相对定位

Web开发
CSS样式表一席谈之绝对定位与相对定位

关于CSS样式表

Web开发
关于CSS样式表

lol偷钱流符文搭配推荐

英雄联盟 网络游戏
lol偷钱流符文搭配推荐

巧妙运用CSS样式表立刻改变鼠标的样式

Web开发
巧妙运用CSS样式表立刻改变鼠标的样式

CSS样式表最佳习惯

Web开发
CSS样式表最佳习惯

lolAD刺客新符文搭配推荐

英雄联盟
lolAD刺客新符文搭配推荐

送给正在学习C++的朋友

送给正在学习C++的朋友

Oracle数据库管理员职责(一)

Oracle数据库管理员职责(一)
下拉加载更多内容 ↓