字体属性设置

最新推荐文章于 2022-05-30 09:00:00 发布

小豪boy

最新推荐文章于 2022-05-30 09:00:00 发布

阅读量565

点赞数

分类专栏： CSS3学习笔记文章标签： html5 html

本文链接：https://blog.csdn.net/qq_34771938/article/details/119927607

版权

CSS3学习笔记专栏收录该内容

23 篇文章 0 订阅

订阅专栏

font-family属性

font-family属性用于设置字体。
font-family: "微软雅黑";
字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体。

font-family: serif, "Times New Roman", "微软雅黑";
字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少。
如何设置为用户电脑中没有的字体呢？那就必须自己定义新字体，这就需要我们有字体文件，用户加载网页的时候，会同时下载这些字体文件。

定义字体

字体文件根据操作系统和浏览器不同，有eot、woff2、 woff、ttf、svg文件格式，需要同时有这5种文件。
当我们拥有字体文件之后，就可以用@font-face定义字体。
@font-face {
    font-family: '字体名称';
    font-display: swap;
    src: url('eot字体文件地址');
    src: url('eot字体文件地址') format('embedded-opentype'), 
        url('woff2字体文件地址') format('woff2'), 
        url('woff字体文件地址') format('woff'), 
        url('ttf字体文件地址') format('truetype'), 
        url('svg字体文件地址') format('svg');
}

阿里巴巴普惠体

阿里巴巴提供了一套免费商用授权的普惠字体，网址https://www.iconfont.cn/webfont 。
使用阿里巴巴普惠字体也省去了下载字体的麻烦。

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>First HTML Web</title>
    <style>
        @font-face {
            font-family: 'webfont';
            font-display: swap;
            src: url('//at.alicdn.com/t/webfont_48p0st422e8.eot');
            /* IE9*/
            src: url('//at.alicdn.com/t/webfont_48p0st422e8.eot?#iefix') format('embedded-opentype'),
                /* IE6-IE8 */
                url('//at.alicdn.com/t/webfont_48p0st422e8.woff2') format('woff2'),
                url('//at.alicdn.com/t/webfont_48p0st422e8.woff') format('woff'),
                /* chrome、firefox */
                url('//at.alicdn.com/t/webfont_48p0st422e8.ttf') format('truetype'),
                /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
                url('//at.alicdn.com/t/webfont_48p0st422e8.svg#杨任东竹石体-Bold') format('svg');
            /* iOS 4.1- */
        }
        
        p {
            font-family: webfont;
            font-size: 30px;
        }
    </style>
</head>

<body>
    <!-- font-family属性 -->
    <!-- 阿里巴巴普惠体 -->
    <p>
        还没来得及去沾花惹草，就被人拔光了。
    </p>
</body>

</html>

小豪boy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
字体属性设置

font-family属性font-family属性用于设置字体。font-family: "微软雅黑";字体可以是列表形式，一般英语字体放到前面，后面的字体是前面的字体的“后备”字体。font-family: serif, "Times New Roman", "微软雅黑";字体通常必须是用户计算机中已经安装好的字体，所以一般来说设置为微软雅黑和宋体较多，设置成其他字体较少。如何设置为用户电脑中没有的字体呢？那就必
复制链接

扫一扫

专栏目录