【HTML基础】字体引入 ——点滴积累大进步系列

最新推荐文章于 2023-07-27 20:03:40 发布

小唛的前端宝库

最新推荐文章于 2023-07-27 20:03:40 发布

阅读量556

点赞数

分类专栏：前端开发

本文链接：https://blog.csdn.net/qq_34611721/article/details/81085287

版权

前端开发专栏收录该内容

3 篇文章 0 订阅

订阅专栏

特殊字体的引入

特殊字体的引入

1、找到适宜的字体文件（最好格式齐全）.ttf/.otf/.eot/.woff/.svg

而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。参考地址

TrueType

Windows和Mac系统最常用的字体格式，其最大的特点就是它是由一种数学模式来进行定义的基于轮廓技术的字体，这使得它们比基于矢量的字体更容易处理，保证了屏幕与打印输出的一致性。同时，这类字体和矢量字体一样可以随意缩放、旋转而不必担心会出现锯齿。

EOT – Embedded Open Type (.eot)

EOT是嵌入式字体，是微软开发的技术。允许OpenType字体用@font-face嵌入到网页并下载至浏览器渲染，存储在临时安装文件夹下。

OpenType (.otf)

OpenType是微软和Adobe共同开发的字体，微软的IE浏览器全部采用这种字体。致力于替代TrueType字体。
WOFF – Web Open Font Format (.woff)
WOFF（Web开发字体格式）是一种专门为了Web而设计的字体格式标准，实际上是对于TrueType/OpenType等字体格式的封装，每个字体文件中含有字体以及针对字体的元数据（Metadata），字体文件被压缩，以便于网络传输。

SVG (Scalable Vector Graphics) Fonts (.svg)

SVG是由W3C制定的开放标准的图形格式。SVG字体就是使用SVG技术来呈现字体，还有一种gzip压缩格式的SVG字体。

2、字体转换器推荐

字体格式转换器

3、实例展示

目录位置

<!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>特殊字体引入</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            font-family: lll;
            line-height: 60px;
        }
        article{
            font-size: 30px;
            font-variant: small-caps;
            /* 小型大写字母 */
        }
        @font-face{
            font-family: dingding;
            src: url(dingding.OTF);
        }

    </style>
</head>
<body>
    <section id="showFont">
        <h1>字体展示</h1>
        <hr>
        <style>
            #showFont h1{
                font-size: 50px;
                line-height: 80px;
            }
        </style>
        <article>
            <sapn style="font-family: lll">各种字体大荟萃hello</sapn><br>
            <sapn style="font-family: dingding">各种字体大荟萃hello</sapn><br>
            <sapn style="font-family: shiguang">各种字体大荟萃hello</sapn><br>
            <sapn style="font-family: jian">各种字体大荟萃hello</sapn><br>
            <sapn style="font-family: hanyi">各种字体大荟萃hello</sapn><br>
            <sapn style="font-family: happy">各种字体大荟萃hello</sapn><br>
        </article>
    </section>
</body>
</html>

4、遇见错误解析

之前遇到很多次字体文件引入后失效的问题，后来发现不是引入错误，是文字包格式不识别，推荐自定义文字时选用.ttf格式字体包，字体出不来的话尝试换个字体包吧，(☄⊙ω⊙)☄

小唛的前端宝库

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
【HTML基础】字体引入 ——点滴积累大进步系列

特殊字体的引入1、找到适宜的字体文件（最好格式齐全）.ttf/.otf/.eot/.woff/.svg而由于网页中使用的字体类型，也是各浏览器对字体类型有不同的支持规格。字体格式类型主要有几个大分类：TrueType、Embedded Open Type 、OpenType、WOFF 、SVG。参考地址TrueTypeWindows和Mac系统最常用的字体格式，其最大的特点...
复制链接

扫一扫