CSS基础知识真难啊-font

时间:2023-03-09 01:33:31
CSS基础知识真难啊-font

不吐不快啊!!!!

上午测试还好好的,下午再写一次准备发出来就出错了!!

传说中程序媛三大错觉:我肯定没错,刚才还好好的,一定是有人改了我代码。。

我的口头禅都快变成“刚刚还好好的”了!

事情是这样的,我在#myspan{font-size:18px;background:red}前面弄了空格,一直没注意它,结果效果弄不出来,郁闷啊

才顺手把空格删了,啊千万只*奔腾而过啊。。。。。。。。

恩以后注意了,不能在全角下整出空格(⊙﹏⊙)b---我恨全角--哦了

------------------------------------------------------------------

首先,今天我才知道原来

chrome浏览器在中文状态下默认最小值是12px

ie浏览器在中文状态下默认最小值是10px

ff浏览器在中文状态下默认最小值是10px

<html xmlns="http://www.w3.org/1999/xhtml"><head>
<script type="text/javascript" src="http://www.w3school.com.cn/jquery/jquery.js"></script>
<style type="text/css">
.myspan{font-size:10px;}
</style>
<script type="text/javascript">
$(function(){
$("#mybtn").click(function(){
alert($(".myspan").css("font-size"));
});
$("#myabcBtn").click(function(){
alert($(".myabcSpan").css("font-size"));
});
});
</script>
</head> <body>
<div>
<span class="myspan">这里显示中文</span>
<input type="button" value="aa" id="mybtn"/>
</div>
<div>
<span class="myabcSpan">this is abc</span>
<input type="button" value="abc" id="myabcBtn"/>
</div>
</body></html>

更改myspan的font-size,会发现,不设置的时候,弹框16px=》说明当前浏览器默认字体大小为16px

设置<=12px时,弹框12px;设置>=12px,弹框提示正常16px;=》说明chrome浏览器在中文状态下默认最小值是12px

因为把chrome浏览器调整成英文状态下是正常的px值

------------------------------------------------------------------

》》em:相对长度单位。相对于(参照物为) 当前对象内,文本的字体尺寸font-size

》》em”还可以指定到小数点后三位,比如“1.123em”

如当前对行内文本的字体尺寸未被人为设置,则相对于浏览器的默认字体尺寸

如body{font-size:15px;}某div{height:2em;font-size:10em},所以,该div的height为300px

计算:body设置了字体尺寸15px,-->div的字体尺寸为10*15px=150px;-->div的高度为2*150px=300px

我连这个都还没看完,哎╮(╯▽╰)╭http://www.w3cplus.com/css/px-to-em

-----------------------------------------font-weight---------------------------------------------

百度知道有人提到:“WIN系统下,小于700,统统不起作用的,【部分显示器分辨率高的,可以支持小于600】,MAC下可以。 可能是浏览器加分辨率的问题,同样,font-size:小于12px,win系统下,是无区别的,而MAC可以读取很小的字体!”

所以上面的测试是因为win系统?

font-weight:数字值 400 相当于 关键字 normal,700 等价于 bold。每个数字值对应的字体加粗必须至少与下一个最小数字一样细,而且至少与下一个最大数字一样粗。

是不是很绕

可用值      值的说明 
normal     缺省值。字体正常显示。 
bold         粗体 
bolder      比粗体更加粗 
lighter      比正常字体淡 
100         至少和200一样淡 
200         至少和100一样粗,至少和300一样淡 
300         至少和200一样粗,至少和400一样淡 
400         字体正常显示,相当于normal。 
500         至少和400一样粗,至少和600一样淡 
600         至少和500一样粗,至少和700一样淡 
700         粗体,相当于bold。 
800         至少和700一样粗,至少和800一样淡 
900         至少和800一样粗

“字体浓淡属性是根据用户电脑上安装的字体相应匹配改变的。在很多情况下,由于系统作了最相近的匹配,因此看不出不同的 font-weight 值有什么区别。”

啊。。。黑人问号。。。又是一个观点?