CSS3-字体样式


<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS3的其他属性title>
    <style type="text/css">
        /*@font-face :声明使用服务器端字体*/
        /*服务器端字体:用户客户端(浏览器)无需安装网页中所需要的字体,直接让浏览器去服务器端取字体,然后渲染页面的技术。省去了下载安装的操作,提升用户体验*/
        /*服务器端字体对otf和ttf这两种字体格式支持良好*/
        @font-face {
            /*给字体去一个名字*/
            font-family: "自定义";
            /*把字体路径导入本文档*/
            src:url("瘦金体字体.ttf");
        }
        p {
            font-family: "自定义";
            font-size: 30px;
        }
        /*box-sizing:设置width和height属性值包含的内容。*/
        div {
            width: 100px;
            height: 100px;
            padding: 10px;
            border: 10px solid #000;
            /*默认盒模型 content-box。width和height只是用来设置元素的有效时间利用空间,添加padding和border并不会挤占元素的有效利用空间*/
            /*怪异盒模型:border-box。IE浏览器下的一种盒模型,我们可以把值设置为border-box来实现怪异盒模型。width和height设置的是整个元素的尺寸(包含边框,内边距,有效利用空间),添加border和padding后,会向内挤占元素的content面积。*/
            /*padding-box。PC端浏览器不支持该设置,但是在手机端支持。width和height设置元素的尺寸(包含内边距,有效利用空间),添加padding后,会向内挤占元素的content面积。边框依旧会向外扩展*/
            box-sizing: border-box;
        }
        div p {

        }

    style>
head>
<body>

    <p> 你猜我是什么字体 hello worldp>
    <div>   
        <p>我是文字p>
    div>

    
    

    <div style="width: 100px; height: 100px; resize: both; overflow: auto; border: 1px solid red">div>

body>
html>

你可能感兴趣的:(CSS3)