zoukankan      html  css  js  c++  java
  • 我给女朋友讲编程CSS系列(3) CSS如何设置字体的类型、大小、颜色,如何使用火狐浏览器的Firebug插件查看网页的字体

    一、CSS如何设置字体的类型、大小、颜色

    设计网页时,一般设置body的字体,让其他标签继承body的字体,这样设置特别方便,但是标题标签h1到h6和表单标签(input类型)是没有继承body的字体属性的,它们的字体需要单独设置。

     

    1,  新建一个网页a.html,把下面的代码复制进去。

    <html>
    <head>
    <style type="text/css">
    body 
    {
    font-family : 微软雅黑,宋体; 
    font-size : 1em;
    color : #f00;
    }
    </style>
    </head>
    <body >
    <h1>设置字体的类型、大小、颜色</h1>
    <p>
        CSS设置字体的类型、大小、颜色
    </p>
    </body>
    </html>

    2,  使用浏览器打开网页a.html,可以查看到效果图如下:

    3,  设置字体的类型

    字体的类型通过下面这段代码设置:

    font-family : 微软雅黑,宋体, 'New York';

    font-family翻译为中文是“字体家族”,就是告诉浏览器,优先使用哪一种字体,谁排在最前面,就先使用这种字体,这里是“微软雅黑”;

     

    多种字体使用逗号间隔,字体名中带有空格或#、$的,需要加单引号或双引号。

     

    如果操作系统中“微软雅黑”,XP系统中就没有这种字体,那么就会使用“宋体”,如果没有“宋体”,就会再使用系统中默认的字体,不过操作系统中一般都是有“宋体”的,而且,如果没有给网页设置字体类型,网页就会按照操作系统中默认的字体来显示。

     

    4,设置字体的大小

    字体大小通过下面这段代码设置:

    font-size : 1em;

    font-size 翻译为中文是“字体尺寸”,它的单位一般是px(像素)或em(字体高度)。

     

    中国的许多网站的默认字体是12px,而且很多人使用的是IE浏览器,像IE6,用户是不能改变网页字体大小的,而现在主流的浏览器,只需要按住Ctrl后,滚动滑轮就可以放大缩小网页了。

     

    单位em是一种相对的字体高度,一般的浏览器都默认为16px,需要注意的是,em会继承父元素的字体大小。

     

    比如设置body字体大小为1em,p的字体大小为0.8em,那么换算为像素,p标签的实际单位是 1 * 0.8 * 16px = 12.8px。

     

    不过,为了简化em和px的换算,一般设置body的font-size为62.5%,然后使用em设置其他标签的字体大小,这样,em换算为px只需要乘以10就行了,比如1em = 1 * 62.5% * 16px = 10 px

     

    很多人都推荐使用em作为网页字体单位,有2点好处,不过我的实践告诉我,似乎并不太重要。

     

    (1)当对IE6设置了字体更大或更小后,所有字体都可以按照比例放大缩小。不过,使用IE6的人越来越少了,现在主流的浏览器,按住Ctrl,滑动滑轮,就可以放大缩小了。

     

    (2) 通过修改body的大小,就能按比例修改所有字体大小,因为body是其他字体的基准。这个一般是先设置body大小,然后设置其他标签大小,此时,若是修改了body的大小,其他标签的大小就会跟着变了。

     

     

    5,  设置字体颜色

    设置字体的颜色通过下面的代码:

    color : #f00;

    color是颜色的意思,color用来设置一个标签的前景色,表现出来也就是元素文本的颜色。

    它的值,一般都是使用#加16进制的颜色值来表示。

    二、如何使用火狐浏览器的Firebug插件查看网页的字体?

    火狐浏览器有很多插件,其中插件Firebug对网页调试、程序开发有很重要的作用,下面讲一下如何使用Firebug查看网页中使用的字体。

    1,  下载火狐浏览器。

    在百度搜索框中输入“火狐浏览器”,一般,排在第一个的就是最新版的软件,如下图,选择“普通下载”,下载完成后,安装即可。

    2,  打开“附加组件”窗口。

     

    安装完火狐浏览器后,在浏览器关闭按钮(叉号)下方,是一个按钮“打开菜单”,单击一下,选择“附加组件”,然后就会打开一个新的窗口。

    3,  搜索firebug

    在右上角的搜索框中输入“firebug”,单击搜索。找到搜出来的Firebug,单击安装。安装完成后把浏览器关闭,重新打开。

    4,  使用firebug

    打开火狐浏览器后,按一下键盘上的F12,你会发现原来的页面被分为了上下两部分,下面那部分就是firebug的工作窗口。

    使用firebug一定要记住快捷键,F12,按一下,firebug会弹出来;再按一下,它会消失。

    单击【查看器】,单击【计算后】,然后可以看出百度首页使用的字体为font-family: arial;

    5,  font-family: arial;的说明

    CSS设置字体的类型通过font-family属性来设置,一般设置为“宋体,微软雅黑”等等字体,arial是微软的很多软件使用的一种字体。

  • 相关阅读:
    Centeos7搭建selenium+Chrome浏览器
    数据结构学习篇之栈和队列
    数据结构学习篇之线性表
    Tornado基础学习篇
    Python控制函数运行时间
    python线程实现异步任务
    Python实现几种简单的排序算法
    python爬虫遇到会话存储sessionStorage
    Python 有哪些优雅的代码实现让自己的代码更pythonic?
    Ubuntu查看端口使用情况,使用netstat命令:
  • 原文地址:https://www.cnblogs.com/workest/p/3915905.html
Copyright © 2011-2022 走看看