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

最新推荐文章于 2024-08-29 17:41:06 发布

uncle_Huang

最新推荐文章于 2024-08-29 17:41:06 发布

阅读量929

点赞数

分类专栏：前端文章标签： css3

本文链接：https://blog.csdn.net/uncle_Huang/article/details/96436978

版权

前端专栏收录该内容

23 篇文章 1 订阅

订阅专栏

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

@font-face{
font-family:webFont;
src:url('font/字体名称.otf)format(“opentype”);
}

字体格式	字体属性
otf	opentype
ttf	truetype
eot	embedded-opentype

1.font-family
设置文本的字体名称

2.font-style
设置文本样式
normal不适用斜体
static使用斜体
oblique使用倾斜体
inherit从父元素继承

3. font-variant
设置文本是否大小写
normal使用浏览器默认值
small-caps使用小型大写字母
inherit从父元素继承

4.font-weight
设置文本粗细
normal浏览器默认值
bold粗体
bolder更粗
lighter更细
100-900从细到粗

5.font-stretch
设置文本是否横向拉伸变形
normal正常文字宽度
wider把伸展比例设置为更进一步的伸展值
narrower把收缩比例设置为更进一步的收缩值
ultra-condensed比正常文字宽度窄4个基数
extra-condensed比正常文字宽度窄3个基数
condensed比正常文字宽度窄2个基数
semi-condensed比正常文字宽度窄1个基数
semi-expanded比正常文字宽度宽1个基数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>服务器端字体和@font-face属性</title>
    <style type="text/css">

       @font-face {
           font-family: webfont;
           src: url(毛泽东字体.ttf);
       }

       h1{
           font-family: webfont;
           font-style: oblique;
           font-size: 50px;
       }

       h2{
           font-variant: small-caps;
           font-weight: lighter;
           
       }
    

    </style>
</head>
<body>
   <h1>魔道祖师</h1>
   <h2>master devil</h2>
   
</body>
</html>