关于CSS3中font-weight的作用!

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了关于CSS3中font-weight的作用!相关的知识,希望对你有一定的参考价值。

<!DOCTYPE html>
<html>
<head>
<style>
@font-face

font-family: myFirstFont;
src: url('/example/css3/Sansation_Light.ttf')


@font-face

font-family: myFirstFont;
src: url('/example/css3/Sansation_Bold.ttf')
font-weight:bold;


div

font-family:myFirstFont;

</style>
</head>
<body>

<div>
With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe" fonts.
</div>

<p><b>注释:</b>Internet Explorer 9+ 支持新的 @font-face 规则。Internet Explorer 8 以及更早的版本不支持新的 @font-face 规则。</p>

</body>
</html>

以上代码中只要我将font-weight:bold;这一行去除,我就发现With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe"这段内容全部被加粗,而不是只有finally,请问是为什么呢!
源代码运行结果是With CSS3, websites can <b>finally</b> use fonts other than the pre-selected "web-safe中只有finally是加粗的,然而只要删了font-weight:bold;却全部都加粗了,这才是我的主要问题!

定义和用法:
font-weight 属性设置文本的粗细。

说明:
该属性用于设置显示元素的文本中所用的字体加粗。数字值 400 相当于 关键字 normal,700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。

可能的值:
normal:默认值。定义标准的字符。
bold:定义粗体字符。
bolder:定义更粗的字符。
lighter:定义更细的字符。
100-900:定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。
inherit:规定应该从父元素继承字体的粗细。

注:任何的版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。
参考技术A 因为你定义了两个font-face名字都一样,浏览器默认会应用后一个,如果后一个字体定义有问题,就还是用第一个,目测你第二个字体定义有问题src括弧后面少分号就直接跟font-weight了,所以定义无效,应用第一个字体定义没有加粗,这一步明白吧,现在说去掉fontweight后为什么加粗的原因,上面已经说了,第二个字体定义少分号定义有误,当去掉font-weight时,第二个字体生效了,因为css最后一个样式可以不用分号结束,所以第二个定义的样式被应用上了,目测第二个字体本身就是加粗字体,有bold,所以才有你说的这个现象,希望能明白本回答被提问者采纳 参考技术B font-weight 属性设置文本的粗细。追问

那为什么我删了它,层中的字体全部加粗了呢!

追答

font-weight:bold;

normal:默认值。定义标准的字符。
bold:定义粗体字符。
bolder:定义更粗的字符。
lighter :定义更细的字符。
定义由粗到细的字符。400 等同于 normal,而 700 等同于 bold。

关于CSS 中a和a:hover起到啥作用?

就是下面这个,我只知道a:hover 是伪类,但这个a的作用是什么?直接设置它的颜色有什么用?a和a:hover是属于CSS还是DIV?
a color: #000; text-decoration: none;
a:hover color: #F00;

a的作用是链接,点击<a></a>之间的内容,页面会跳转到链接的地址。直接设置它的颜色,比如,例子中acolor:#000;,意思是<a></a>之间的内容显示为黑色,如果不设置的话,浏览器默认的a链接的颜色是蓝色;

a:hover属于css,它设置了当鼠标悬浮在链接内容之上时,链接内容的样式,比如,例子中a:hover color:#F00;,它设置了当鼠标悬浮在该链接内容上时,链接内容变成红色。

扩展资料:

总结几个a的伪类:

a:link 英文link就是链接的意思,代表当一段文本为链接时的属性。

a:visited 英文visited就是访问过的意思,代表这段文本被点击之后的属性。

a:hover 英文hover就是悬停的意思,代表鼠标指针放在这个链接上时的属性。

a:active 英文active就是有效的、快速的意思,代表鼠标按下时一瞬间的属性。

一般最常用的方法是a CSS属性 a后面什么也没有,代表一次定义这四个属性,然后根据需要再定义其中某个属性就可以了,最常用的是a:hover CSS属性

参考资料:百度百科-CSS

参考技术A a的作用是链接,点击<a></a>之间的内容,页面会跳转到链接的地址。直接设置它的颜色,比如,例子中acolor:#000;,意思是<a></a>之间的内容显示为黑色,如果不设置的话,浏览器默认的a链接的颜色是蓝色;
a:hover属于css,它设置了当鼠标悬浮在链接内容之上时,链接内容的样式,比如,例子中a:hover color:#F00;,它设置了当鼠标悬浮在该链接内容上时,链接内容变成红色。
关于这个问题,总结几个a的伪类:
a:link 未被访问
a:visited 已被访问
a:hover 鼠标悬浮在上面
a:active 鼠标点中激活链接
可包含颜色、字号、背景、字体以及文本装饰等样式。
注:visited和hover的顺序一定不能倒换,否则ie6会有大大的问题。
参考技术B a是指<a></a>标签,a:hover指的是鼠标经过它时候的效果,因为浏览器解析超链接的时候默认是蓝色有下划线的,所以要用css来改成你想要的效果。你的例子中的效果就是:链接文字为白色且无下划线,鼠标经过的时候变为红色。追问

为何是直接写“a”,而不是a>?

追答

是html标签,而css里只需些标签名,比如图片的html标签式,css里只需写img...

本回答被提问者和网友采纳
参考技术C a:hover 是css,<a href="#">888888</a>这个是html,和div没关系。a其实就是你鼠标指到某个连接上的几种状态的集合,你可以看见的效果就是某个连接的直观状态,a:hover是鼠标经过连接的状态,可以设置鼠标经过时变换文字颜色也可以变换背景,使得用户浏览网页时知道那个是可以点击后跳转的。一般鼠标指上去都会变成一只小手的样子。追问

我例子设置了a的颜色,下面所有的连接都改变了,请问有什么方法设置a只改变某个连接的状态吗?

追答

给a标签起个类名或者id名啊,或者写它的祖先级元素的名字下面的a,如
888888就写.lianjiecolor:red;
888888就写.lianjie acolor:red;
直接写a就是对页面里所有链接的起作用,一般用作对整个页面a标签的重置

参考技术D 在HTML中标签<a></a> 。其中的a 是 anchor 的缩写,这些标签的作用是标明超连接的起始位置或目的位置。
通过使用 href 属性,创建指向另外一个文档的链接(或超链接)通过使用 name 或 id 属性,创建一个文档内部的书签(也就是说,可以创建指向文档片段的链接)<a> 元素最重要的属性是 href 属性,它指定链接的目标。
a:hvoer是一个CSS伪类,用于鼠标移到a的时候的样式

以上是关于关于CSS3中font-weight的作用!的主要内容,如果未能解决你的问题,请参考以下文章

关于使用CSS3实现元素样式过渡的解决方案

关于随机数的前世今生

css3基础

来一波CSS3操作

理解CSS3 isolation: isolate的表现和作用

CSS3的字体样式属性,文本样式属性