首页 > 代码库 > 定义新的字体/引入字体文件方法总结

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

2024-10-15 01:25:39   217人阅读

<!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/

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

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

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


联系
我们