• 欢迎访问搞代码网站,推荐使用最新版火狐浏览器和Chrome浏览器访问本网站!
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏搞代码吧

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

css 搞代码 7年前 (2018-06-11) 187次浏览 已收录 0个评论

  在过去页面上的字体是一成不变的,静静的呆在那。当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>中定义不同的字体样式,以便页面中根据不同字体加以引用。比如:

<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>

<p class=”tt2″>田涛</p>

</body>

</html>

欢迎大家阅读《CSS样式表一席谈之利用CSS改变字体_css》,跪求各位点评,若觉得好的话请收藏本文,by 搞代码


搞代码网(gaodaima.com)提供的所有资源部分来自互联网,如果有侵犯您的版权或其他权益,请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected],我们会在看到邮件的第一时间内为您处理,或直接联系QQ:872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接:CSS样式表一席谈之利用CSS改变字体_css

喜欢 (0)
[搞代码]
分享 (0)
发表我的评论
取消评论

表情 贴图 加粗 删除线 居中 斜体 签到

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址