2023.10.23

web字体

基本用法

可以通过@font-face指定字体的具体地址，浏览器会自动下载该字体，这样就不依赖电脑上的字体了

方法一，引用外部字体，语法（简写形式）

<style>
        /* 引入外部字体*/
        @font-face {
            font-family: "戴森球";
            src: url("./font1/方正手迹.ttf");
        }
</style>

方法二，阿里定制字体语法（高兼容性）阿里在线定制字体

<style>
         /* https://www.iconfont.cn/webfont 阿里在线定制字体 */
        @font-face {
        font-family: "webfont";
        font-display: swap;
        src: url('./font2/webfont.eot'); /* IE9 */
        src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('./font2/webfont.woff2') format('woff2'),
        url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
        url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
</style>

方法一中的字体文件很大，使用完整字体文件不现实，通常使用阿里定制个性化字体对某几个文字单独定制，文字所占空间很小。两种方法都需要对浏览器进行兼容性处理

字体效果如下图

屏幕截图 2023-10-23 193755.png

完整代码如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>web字体</title>
    <style>
        /* 引入外部字体*/
        @font-face {
            font-family: "戴森球";
            src: url("./font1/方正手迹.ttf");
        }
         /* https://www.iconfont.cn/webfont 阿里在线定制字体 */
        @font-face {
        font-family: "webfont";
        font-display: swap;
        src: url('./font2/webfont.eot'); /* IE9 */
        src: url('./font2/webfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
        url('./font2/webfont.woff2') format('woff2'),
        url('./font2/webfont.woff') format('woff'), /* chrome、firefox */
        url('./font2/webfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
        url('./font2/webfont.svg#webfont') format('svg'); /* iOS 4.1- */
        }
        .t1{
            font-size: 20px;
            font-family: "戴森球";
        }
        .t2{
            font-size: 20px;
            font-family: "webfont";
        }
    </style>
</head>
<body>
    <div class="t1">春风得意马蹄疾，不信人间有别离</div>
    <div class="t2">如果心中都是质疑与恨，就少了空间去爱和肯定</div>
</body>
</html>

以上为web设置个性化字体的两种方法，感谢阅读。