不吐不快啊！！！！

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

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

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

事情是这样的，我在#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 值有什么区别。”

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

CSS基础知识真难啊-font的更多相关文章

  1. CSS基础知识真难啊-浮动

    无浮动 <ul style="width: 440px;"> <li id="myli" style="border: 4px so ...

  2. CSS基础知识真难啊

    CSS层叠样式表Cascading Style Sheets CSS派生选择器(上下文选择器): 后代选择器:h1  strong {color:red;}第一个参数和第二个参数之间的代数是可以无限的 ...

  3. CSS基础知识真难啊-background-渐变

    文章参考 http://www.zhangxinxu.com/wordpress/?p=727 http://www.uqu8.com/html/2014/html-css_1105/176.html ...

  4. CSS基础知识真难啊-position-relative-absolute

    http://blog.csdn.net/libertea/article/details/11662661 -----------position:relative:生成相对定位的元素,相对于其正常 ...

  5. 〖前端开发〗HTML/CSS基础知识学习笔记

    经过一天的学习,把慕课网的HTML/CSS基础知识学完了,笔记整理: 1. 文件结构: HTML文件的固定结构: <html> <head>...</head> & ...

  6. CSS基础知识筑基

    01.CSS 简介 CSS 指层叠样式表 (Cascading Style Sheets),对HTML网页内容进行统一外观样式设计和管理,给网页进行各种装饰,让她变得美观,是HTML的化妆师.(Cas ...

  7. 前端开发：css基础知识之盒模型以及浮动布局。

    前端开发:css基础知识之盒模型以及浮动布局 前言 楼主的蛮多朋友最近都在学习html5,他们都会问到同一个问题 浮动是什么东西?  为什么这个浮动没有效果?  这个问题楼主已经回答了n遍.今天则是把 ...

  8. CSS基础知识之float

    前段时间写过一篇CSS基础知识之position,当时对float的理解不太准确,被慕课网多名读者指出(原文已修正,如有误导实在抱歉).现对float进行更深入的学习,在此把学习心得分享给大家. 浮动 ...

  9. (转)第一天　XHTML CSS基础知识 文章出处：标准之路(http://www.aa25.cn/div_css/902.shtml)

    欢迎大家学习<十天学会web标准>,也就是我们常说的DIV+CSS.不过这里的DIV+CSS是一种错误的叫法,建议大家还是称之为web标准. 学习本系列教程需有一定html和css基础,也 ...

随机推荐

  1. U3D sorting layer, sort order, order in layer, layer深入辨析

    1,layer是对游戏中所有物体的分类别划分,如UIlayer, waterlayer, 3DModelLayer, smallAssetsLayer, effectLayer等.将不同类的物体划分到 ...

  2. ZooKeeper 笔记(3) 实战应用之【统一配置管理】

    大型应用通常会按业务拆分成一个个业务子系统,这些大大小小的子应用,往往会使用一些公用的资源,比如:需要文件上传.下载时,各子应用都会访问公用的Ftp服务器.如果把Ftp Server的连接IP.端口号 ...

  3. React Native开发技术周报1

    (一).资讯 1.React Native 0.21版本发布,最新版本功能特点,修复的Bug可以看一下已翻译 重要:如果升级 Android 项目到这个版本一定要读! 我们简化了 Android 应用 ...

  4. Java 密码扩展无限制权限策略文件

    因为某些国家的进口管制限制,Java发布的运行环境包中的加解密有一定的限制.比如默认不允许256位密钥的AES加解密,解决方法就是修改策略文件.   官方网站提供了JCE无限制权限策略文件的下载:   ...

  5. Java应用程序项目的打包与发行（run.bat形式）

    参考: http://www.iteye.com/topic/57312 背景: 以前一直都是在eclipse上面创建应用程序,每次要要运行的时候都要打开eclipse, 直到有个同事叫我帮忙写一个应 ...

  6. 使用Python 将shapefile导入mongodb

    使用Python 将shapefile导入mongodb 随着big data时代的到来,各个行业都在考虑能不能把big data的思路.方法引入进来,GIS行业也不能免俗. 下面就介绍一下如何将sh ...

  7. 使用Topshelf创建Windows服务

    概述 Topshelf是创建Windows服务的另一种方法,老外的一篇文章Create a .NET Windows Service in 5 steps with Topshelf通过5个步骤详细的 ...

  8. Beta项目冲刺–第四天

    考试太多,做项目的时间太少-- 队伍:F4 成员:031302301 毕容甲 031302302 蔡逸轩 031302430 肖阳 031302418 黄彦宁 会议内容: 1.站立式会议照片: 2.项 ...

  9. 第一章：java语言概述与开发环境

    前言: 1.程序是什么? 程序是对现实世界的数字化模拟! 2.编程语言是工具,程序的作用就是解决问题!  重要的思路! 该知识点能解决什么问题?   1.语言特性:单继承.多接口!       纯面向 ...

  10. [转]java web简单权限管理设计

    原文地址:http://blog.csdn.net/zwx19921215/article/details/44467099 最近在做一个网站类型项目,主要负责后台,ui框架选型为jquery eas ...