HTML&CSS基础-字体的样式

　　　　　　　　　　　　HTML&CSS基础-字体的样式

　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　　作者：尹正杰

版权声明：原创作品，谢绝转载！否则将追究法律责任。

 

 

一.HTML源代码

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>字体的样式</title>
        
        <style>
            .hello{
                /**
                 *     设置字体颜色，使用color来设置文字的颜色
                 */
                color: red;
                
                /**
                 *     设置文字的大小，浏览器中一般默认的文字大小都是16px
                 *         font-size设置的并不是文字本身的大小
                 *         在页面中，每个文字都是处在一个看不见的框中的
                 *         我们设置的font-size实际上是设置格的高度，并不是字体的大小
                 *         一般情况下文字都要比这个格要小一些，也有时会比格大，根据字体的不同，显示效果也不同。
                 */
                font-size: 30px;
                
                /**
                 *     通过font-family可以指定文字的字体
                 *         当采用某种字体时，如果浏览器支持该字体则使用，如果浏览器对该字体不支持，则使用默认字体
                 *         该样式可以同时指定多个字体，多个字体之间使用，分开当采用多个字体时，浏览器会优先使用前边的字体，如果前面的字体没有，则尝试依次匹配下一个字体，若一个都匹配不上则使用默认字体。
                 *         浏览器使用的字体默认就是计算机中的字体，如果计算机中有则使用，若没有就不用。windows操作系统默认存放系统路径在:"C:\Windows\Fonts"
                 *         在开发中，如果字体太奇怪，用的太少了，尽量不要使用，有可能用户电脑没有(比如windos中的"curlz mt","微软雅黑"等字体,在linux操作系统不一样有哟~)，就不能达到想要的效果。
                 */
                font-family: "curlz mt","华文彩云","arial", "微软雅黑";
            }
        </style>
    </head>
    <body>
        
        <p class="hello">我是一个P标签,12345,上上打老虎,abcdefg</p>
    </body>
</html>

 

 

二.浏览器打开以上代码渲染结果

 

posted @ 2017-02-27 09:28  尹正杰  阅读(1549)  评论(0)  编辑  收藏  举报