Jorux Notebook

Just a web designer's blog

属性篇(2)—If you love css …

上次主要说明了css对于颜色和文本属性的控制, 这次介绍css对于字体, 背景等属性的控制.

字体(Font):css控制的字体属性包括font-family, font-style, font-variant, font-weight, font-size.

1.font-family: 由字体名(family-names)字组名(generic families)两个部分组成.首先来看个实例,:查看Jorux.com首页的css文件,可以看到以下代码:

body {
font: normal 12px/1.5 Georgia, sans-serif;
text-align:left;
background:#444 url(images/bodybg.jpg) repeat-y;
}

蓝色加亮部分就是font的属性值, 这种写法为简写, 可将其还原为:

font-weight: normal;
font-size: 12px;
line-height: 1.5;
font-family: Georgia, sans-serif;

行高(line-height)其实并不属于font属性, 但可以在简写时归入font属性值内. 现在我们先只看最后一行font-family的部分. “Georgia“即为字体名(有simhei, arial, verdana等), “sans-serif“即为字组名(包括衬线字体(Serif), 非衬线字体(Sans-Serif) 和等宽字体(MonoSpace)三种).

由于Windows自带的汉字字体极为有限. 但一般中文Windows系统都支持宋体(默认, SimSun)和黑体(SimHei)和楷体(kaiti_gb2312). 我们来看看这几种汉字字体(要注意这几种字体名, 楷体的英文字体名为kaiti_gb2312, Firefox对汉字字体支持不良):

宋体   &nbs

24 Responses to “属性篇(2)—If you love css …”

  1. 向常在本站留言的朋友征求Gravatar.

    Gravatar是一个全球通用的储存个人图标的网站. 您需在Gravatar申请一个帐号, 上传一个80*80的个性图标(需要一天左右时间验证), 就能和自己的邮箱地址绑定, 在世界任何支持Gravatar的地方留下自己的个性标志, 给你的留言增加吸引力!

    您的图标被Gravatar收录后, 在本站留言时, Email地址栏填写您在Gravatar注册时的邮箱地址, 即可自动绑定到您的图片(如右图所示).

  2. Darknew says:

    来试试Gravatar,不知你是怎么让blog支持它的呢?
    还有,这个CSS属性是你自己编的? 不错.看着很有帮助的!

  3. 总有同学要问, 这些文章到底是不是我写的, 我要说的是, 这是我花一整天才完成的”作品”. 参考了一些东西, 但90%是我平时积累原创的, 并力求在写作过程中避免落入已存在的教程套路, 多写一些大家平时忽略和难于掌控的部分.
    还是那句话, 请大家不要吝啬留言, 如果有闲情逸致, 还请注册一个Gravatar!
    如有错误的地方, 也请在这留言指出, 必表谢意! 🙂

  4. Ayuleo says:

    写得非常好。对于一些初学者来说,这是一个非常生动易懂及有效的教程!

  5. Darknew says:

    很不错,让读者看了就明白是怎么回事!挺实用的!
    对了,jorux 这个Gravatar能否在Z-blog中添加呢???

  6. Darknew, Gravatar官方的插件集里没有支持asp的,所以暂不支持Zblog.

  7. leavic says:

    没看够!
    不过在评论中知道Gravatar倒也有点意思。

  8. sat says:

    发现一个错误,呵呵,说明background-position的图片左上角的0 0 颜色反了。谢谢JORUX提供那么好的教程。

  9. To sat:

    Thanks! 暂保留这个错误,等有时间再做修改。

  10. yurller says:

    尤其是字体部分的教程,很特别,谢!!!!!!

  11. dai says:

    讲的very good,网页界面good too,我受益,谢!

  12. luluzhu says:

    上了那个网站,我怎么没找到申请帐号的地方啊;-P

  13. To: luluzhu :

    Gravatar.com正在步入2.0,可能需要几星期,完成更新后接受新的注册。

  14. 風痕影 says:

    很高兴又找到一位使用WordPress的同好
    也很喜欢你写的这篇文章

    刚才在写CSS教学时引用了您对oblique的说法
    我也终于能分出italic和oblique的差别了
    十分感谢您,也希望您不会介意

    該教學在以下網站CSS單元中的 “文字格式” 裡
    http://hit1205.ispaz.blogdns.org/

    順帶一提,我的部落格就在同一個網址的blog目錄裡 ^^

  15. TO 風痕影: 不介意你的转载,但希望加上反向链接。

    不过大陆的网路好像访问不了你的blog。

    好运!

  16. 風痕影 says:

    有的,在教学文章底端的参考资料有列出您的连结唷 ^^

    之前也有大陆的朋友反映说连不上我的blog
    而且我发现同一网域其他人的blog也是连不上的
    因此我怀疑整个blogdns.org会不会都被挡住了…

    所以,前几天为了做大陆的 “博客男女” 测验,费尽心思
    经过好几层的转换,总算让 “博客男女” 可以连上我的 blog

    不过,各省的情形应该不大相同,因为…
    前几天我的计数器告诉我说,有从南京连过来的

    我在想,是不是該用 FeedBurner 或者其他服務
    弄一个新的 feed 出来,专门给大陆的朋友订阅

    PS. 很抱歉,上篇我竟没注意到,后面三行没有转成简体

  17. To 風痕影:

    1. 我也推荐用FeedBurner烧制一下,不过要注意把全文都要烧制入Feed。

    2. 你习惯用繁体的话,用繁体就好,没必要转成简体。不像某些大陆人,明明是用简体的人,非得转成繁体装门面。

    3. blogdns.org确实被屏蔽了。

    4. 说到大陆的网络管制,真是…..

  18. shell says:

    最近对web design感兴趣了,又在这看到这么好的资源,真是太感谢了!!!

    解决大陆用户不能访问国外某些站点的问题—-匿名软件Tor
    TOR官方网站:http://tor.eff.org/
    参考1:http://lanker.130.tofor.com/blogview.asp?logID=115&cateID=1
    参考2:http://lanker.130.tofor.com/blogview.asp?logID=116

    希望能给大家带来方便!!!

  19. JanRomance says:

    从你的Blog中,我看出了什么才叫真正的高手,那就是把优秀的外文网站的精华吸收之后,然后介绍给我们这些国内的使用者。我很早就开始接触css,但是一直因为自己的英文不好,惧怕英文网站,直到最近,在delicious上落户,才开始慢慢接触国外的优秀网站。向站长学习,我听说站长是学医学的,但是对webdevelop感兴趣,我也是,不过我是学财政税收的,问我怎么缴税还可以,呵呵。

  20. Hauran says:

    打算认真学习您!希望教程写完并且写好!

  21. Evan says:

    但是IE7下,你的演示显示不出

  22. sina says:

    发现错误:
    font-stye:normal;
    font-stye:italic;
    font-stye:oblique;
    stye少个l,呵呵

  23. gaokestudio says:

    写的非常好,不知何时更新.

Leave a Reply

Designed by Jorux. Proudly powered by WordPress    Except where otherwise noted, this site is licensed under a Creative Commons License.