字体@font-face使用方法

最新推荐文章于 2023-07-14 10:06:12 发布

Zeropoint零点

最新推荐文章于 2023-07-14 10:06:12 发布

阅读量4.9k

点赞数 1

分类专栏： css 文章标签：字体 @font-face 在页面上显示服务器端的字体

本文链接：https://blog.csdn.net/qq_41648132/article/details/79893588

版权

css 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

字体@font-face

font-face使用方法：

@font-face{
  font-family:webfont;
  src:url('font/字体 名称.otf')format（"opentype"）
  }；

属性值：

font-family：设置文本的字体名称；

font-style : 设置文本的样式;

属性值：normal默认值 italic斜体 oblique倾斜体 inherit从父元素继承

font-variant : 设置文本是否大小写；

属性值：normal默认值 small-caps使用小型大写字母 inherit继承父级元素

font-weight：设置文本的粗细；

属性值：normal默认值 bold使用粗体 bolder更粗的字体 lighter使用更细的字体

100—900从细字体到粗的值必须是100的倍数，其中400等于normal，700等同于bold

font-stretch：设置文本是否横向的拉伸变形；

属性值：

normal正常文字的宽度
narrower把收缩比例设置为更进一步的收缩值
ultra-condensed比正常文字宽度窄4个基数
extra-condensed比正常文字宽度窄3个基数
condensed比正常文字的宽度窄2个基数
semi-condensed比正常文字的宽度窄1个基数
semi-expanded比正常文字的宽度宽1个基数
expanded比正常文字的宽度宽2个基数
extra-expanded比正常文字的宽度宽3个基数

ultra-expanded比正常文字的宽度宽4个基数

font-size：设置文本字体的大小；

src：设置自定义字体的相对路径或者绝对路径注意：此属性只能在@font-face规则内使用

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

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>在页面上显示服务器端的字体和@font-face</title>
    <style>
        /*设置下载好的字体*/
        @font-face {
            font-family: Webdings;
            src: url("NotoSansHans-Black.otf");
        }
        h1{
            font-family: Webdings;
        }
        @font-face {
            font-family: Webdings;
            font-style: italic;
            src: url("NotoSansHans-Black.otf");
        }
        h2{
            font-family: Webdings;
            font-style: italic;
        }
        /*设置本地的字体*/
        @font-face {
            font-family: Arial;
            src: local('Arial');
        }
        h3{
            font-family: Arial;
        }
    </style>
</head>
<body>
<h1>在页面上显示服务器端的字体和@font-face</h1>
<h2>在页面上显示服务器端的字体和@font-face</h2>
<h3>在页面上显示服务器端的字体和@font-face</h3>
</body>
</html>

Zeropoint零点

关注

1
点赞
踩
7

收藏

觉得还不错? 一键收藏
1
评论
字体@font-face使用方法

字体@font-facefont-face使用方法：@font-face{ font-family:webfont; src:url('font/字体名称.otf')format（"opentype"） }；属性值：font-family：设置文本的字体名称；font-style : 设置文本的样式; 属性值：normal默认值 italic斜体 obl...
复制链接

扫一扫