CSS3-字体样式

最新推荐文章于 2022-09-16 17:00:32 发布

微笑大笑i

最新推荐文章于 2022-09-16 17:00:32 发布

阅读量1.1k

点赞数

分类专栏： CSS3 文章标签： css3 字体

本文链接：https://blog.csdn.net/u014404513/article/details/51383631

版权

CSS3 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<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 world</p>
    <div>   
        <p>我是文字</p>
    </div>

    <!-- resize：textarea 标签的该属性值是both，可以修改为none让其无法缩放 -->
    <!-- 我们可以给其他标签设置resize属性，让用户来手动缩放这些标签，看是为了让缩放生效，需要把标签的overflow属性设置为auto或hidden（慎用！！！！！） -->

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

</body>
</html>

微笑大笑i

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
CSS3-字体样式

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>CSS3的其他属性</title> <style type="text/css"> /*@font-face ：声明使用服务器端字体*/ /*服务器端字体：用户客户端（浏览器）无需安装网页中所需要的字体，直
复制链接

扫一扫