search

thx / iconfont-plus

新版iconfont仓库，代码暂时不具备开源的条件。主要作为issues的仓库，不排除以后直接把代码在此开源。
MIT License
468 stars 54 forks source link

[Help]阿里妈妈方圆体下载了子集之后调整粗细和圆角不生效 #2695

Open Meinima opened 1 month ago

Meinima commented 1 month ago

问题描述

用的官网下载的子集引用之后显示不了也调整不了,浏览器报了个警告,用完整的字体文件是好的但是文件太大

相关截图

image

image

image

yisibl commented 1 month ago

我这边测试可以的啊，可以复制粘贴并在浏览器中打开下面示例：

data:text/html;charset=UTF-8,<!DOCTYPE html>
    <style>
        @font-face {
            font-family: "MyWebFont";
            src: url("https://at.alicdn.com/wf/webfont/q0HLEzgUtYWC/mRl02uFOyROy.woff2") format("woff2"),
            url("https://at.alicdn.com/wf/webfont/q0HLEzgUtYWC/ndPQPoU75Sdc.woff") format("woff");
            font-display: swap;
        }

        .test  {
            font-family: 'MyWebFont';
            font-size: 60px;
            color: green;
            --wght: 400;
            --BEVL: 100;
            font-variation-settings: 'wght' var(--wght), 'BEVL' var(--BEVL);
            transition: font-variation-settings 1s;
        }

        .test:hover {
            --wght: 900;
        }
    </style>
    <div class="test">今日待办我发起的已处理的</div>
Meinima commented 1 month ago

image 不显示这个字体,会是浏览器版本的问题吗?我的版本是130.0.6723.70

yisibl commented 1 month ago

data:text/html;charset=UTF-8 这段不应该显示到页面上，看看复制的时候是不是多了空格之类的。

Meinima commented 1 month ago

image 去掉了也不行

yisibl commented 1 month ago

Chrome 有报什么错吗？另外换 Firefox 试一下？

Deeyu commented 3 days ago

Chrome 不生效，Firefox正常 使用完整版的字体文件没问题

<!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>Document</title>
        <style>
            @font-face {
                font-family: '阿里妈妈方圆体 VF Regular';
                src:
                    url('//at.alicdn.com/wf/webfont/g9pP3bc8nN2u/IgsslZQgny26.woff2')
                        format('woff2'),
                    url('//at.alicdn.com/wf/webfont/g9pP3bc8nN2u/nRjNsbkbAptU.woff')
                        format('woff');
                font-display: swap;
            }

            .test {
                font-family: '阿里妈妈方圆体 VF Regular';
                font-size: 28px;
                color: #7a5925;
                font-weight: bold;
            }
        </style>
    </head>

    <body>
        <div class="test">恭喜您升至一二三四五星会员查看积分明细开启旅程</div>
    </body>
</html>