定义新的字体/引入字体文件方法总结

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了定义新的字体/引入字体文件方法总结相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <style>
        /* 两种定义字体的方法： */
        @font-face {
            font-family: ‘PingFang‘;
            src: url(‘pingfang/PingFang Regular.eot‘);
            src: local(‘PingFang Regular‘),
                local(‘PingFang‘),
                url(‘pingfang/PingFang Regular.woff‘) format(‘woff‘),
                url(‘pingfang/PingFang Regular.ttf‘) format(‘truetype‘),
                url(‘pingfang/PingFang Regular.svg#PingFang Regular‘) format(‘svg‘);
        }
        @font-face {
            font-family: ‘ping fang‘;
            src: url(‘pingfang/PingFang Regular.eot‘);
            src: url(‘pingfang/PingFang Regular.eot?#iefix‘) format(‘embedded-opentype‘),
            url(‘pingfang/PingFang Regular.woff‘) format(‘woff‘),
            url(‘pingfang/PingFang Regular.ttf‘) format(‘truetype‘),
            url(‘pingfang/PingFang Regular.svg#PingFang Regular‘) format(‘svg‘);
            font-weight: normal;
            font-style: normal;
        }
        h1{font-family: "微软雅黑";font-weight: 400;}
        .demo{font-family: PingFang;}
        h2{font-family: ping fang;font-weight: 400;}
    </style>
</head>
<body>
    <h1 class="demo">大厦将颠沙井街道哦啥老东家是</h1>
    <h1>大厦将颠沙井街道哦啥老东家是</h1>
    <h2>大厦将颠沙井街道哦啥老东家是</h2>
</body>
</html>

下载的字体是ttf格式的，需要通过转换工具再转化成eot、woff、svg、otf格式的字体文件

推荐字体格式转换网址：https://www.fontke.com/tool/convfont/

注意：一般引用的中文字体文件都是很大的，这样就会影响页面的加载速度

从网上下载的苹方字体分为几种类型的，本案例只演示了常规字体的引用方法，其他类型的字体套用即可。

以上是关于定义新的字体/引入字体文件方法总结的主要内容，如果未能解决你的问题，请参考以下文章

webfont 字体

CSS怎么在项目里引入自定义字体图标(@font-face)

vue项目用了iconmood字体图标，pc端可以正常显示，移动端显示异常

canvas文字丢失

Vue中 引入外部字体并使用

在mui中引入自定义的字体图标