js学习-服务器端字体和@font-face属性

最新推荐文章于 2024-12-01 15:00:00 发布

kaka_hikun

最新推荐文章于 2024-12-01 15:00:00 发布

阅读量620

点赞数

分类专栏： js学习文章标签： javascript

本文链接：https://blog.youkuaiyun.com/weixin_48235555/article/details/106557114

版权

js学习专栏收录该内容

25 篇文章

订阅专栏

本文详细介绍了如何使用CSS3中的@font-face属性来在网页上显示服务器端的字体，包括不同字体样式的设置方法，如斜体、加粗等，并展示了如何使用本地字体。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在页面上显示服务器端的字体

在CSS3中可以使用@font-face属性来利用服务端字体
使用方法：
@font-face{
font-family: webfont;
src: url( ‘xxx.otf’ ); / url( ‘xxx.ttf’ ); / url( ‘xxx.eot’ );
}

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体</title>
    <style>
        @font-face {
            font-family: webfont;
            src: url(qtgg.otf);
        }
        @font-face {
            font-family: webfont;
            font-style: italic; /*斜体字体，font-style: 文本样式，分为italic(斜体)、oblique(倾斜体)、inherit(从父元素继承)、normal(不使用斜体)*/
            src: url(jpzk.otf);
        }

        h1{
            font-family: webfont;
        }
        h2{
            font-family: webfont;
            font-style: italic;  /*斜体字体*/
        }
         </style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>HELLO HTML5 CSS3</h1>
</body>
</html>

显示结果：
在这里插入图片描述
可以显示客户端本地的字体：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体</title>
    <style>
        ace{
            font-family:Arial;  /*本地字体*/
            src:local('Arial'); /*使用本地字体的方式*/
        }
        h1{
             font-family: Arial;
             /*font-weight是文本的粗细，bold(粗体)、bolder(更粗)、lighter(更细)*/
             font-weight: lighter; 
             /*font-size是文字字体大小*/
             font-size: 10px;
        }
        h1.bold{
            font-weight:  bold;
            font-size: 30px;
        }
        h1.bolder{
            font-weight:  bolder;
            font-size: 50px;
        }
        /*font-stretch是文本是否横向的拉伸变形*/
    </style>
</head>
<body>
<h1>在页面上显示服务器端的字体</h1>
<h1>Hello Html5  Css3</h1>
<h1 class=" bold">Hello Html5  Css3</h1>
<h1 class=" bolder">Hello Html5  Css3</h1>
</body>
</html>

显示结果：
在这里插入图片描述

  h1{
            font-family: Arial;
            font-variant: small-caps;
            /*font-variant:文本是否为大小写，small-caps(小型大写字母)、inherited（从父元素继承）*/
        }

显示结果：
在这里插入图片描述