纯前端获取本地已安装字体测试

@Ta 13小时前 197点击
回复列表(6|隐藏机器人聊天)
  • @Ta / 13小时前 / /

    移动端浏览器都不支持Font Access API

  • @Ta / 8小时前 / /

    [html]标签的 sandbox iframe 里没有访问字体的权限,要测试可以前往这个页面:

    https://hu60.cn/demo/local-fonts.html

  • @Ta / 7小时前 / /

    我已经加了allow="local-fonts"但没效果,谁知道怎么正确添加权限?

    <iframe class="useriframe" id="user_iframe_1" srcdoc="嵌入的网页代码" seamless="seamless" width="100%" height="300" style="border: none" allow="fullscreen local-fonts" sandbox="allow-forms allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"></iframe>
    
  • @Ta / 7小时前 / /
    @老虎会游泳,单独写allow="local-fonts"是可以的,但是allow="fullscreen local-fonts"不行。
  • @Ta / 6小时前 / /
    导入网页插件:html所有预览功能新窗口打开(当前用户:1,总安装次数:1)
    <script>
    document.addEventListener('DOMContentLoaded', function() {
        // 获取目标 <a> 元素
        const targetLink = document.querySelector('a.useriframelink');
        if (!targetLink) return;
    
        // 创建按钮元素
        const previewBtn = document.createElement('button');
        previewBtn.textContent = '新窗口预览';
        previewBtn.style.cssText = 'margin-left: 10px; cursor: pointer;';
    
        // 在 <a> 元素后面插入按钮
        targetLink.insertAdjacentElement('afterend', previewBtn);
    
        // 解码 HTML 实体的函数
        const decodeEntities = (html) => {
            const txt = document.createElement('textarea');
            txt.innerHTML = html;
            return txt.value;
        };
    
        // 点击事件处理
        previewBtn.addEventListener('click', () => {
            const iframe = document.querySelector('.useriframe');
            if (!iframe) return;
    
            // 解码 srcdoc 内容
            const decodedContent = decodeEntities(iframe.srcdoc);
    
            // 创建新窗口
            const newWindow = window.open('', 'Preview', 'width=800,height=600');
            if (!newWindow) {
                alert('请允许弹出窗口');
                return;
            }
    
            // 写入解码后的内容
            newWindow.document.open();
            newWindow.document.write(`
                <!DOCTYPE html>
                <html>
                <head>
                    <title>预览</title>
                    <base target="_blank">
                    <style>body { margin: 10px }</style>
                </head>
                <body>${decodedContent}</body>
                </html>
            `);
            newWindow.document.close();
        });
    });
    </script>

    视频链接:20251107_170254.mp4(2.98 MB)

    可以加个是否打开新窗口二次手动确认
  • @Ta / 2小时前 / /

    @残缘,我知道了,分隔符是分号,不是空格。这样就可以了:

    <iframe class="useriframe" id="user_iframe_1" srcdoc="嵌入的网页代码" seamless="seamless" width="100%" height="300" style="border: none" allow="fullscreen; local-fonts" sandbox="allow-forms allow-orientation-lock allow-pointer-lock allow-popups allow-presentation allow-scripts"></iframe>
    

    https://www.thewebmaster.com/html/attributes/allow/

    <iframe src="[insert source]" allow="camera 'none'; microphone 'none'"></iframe>
    
添加新回复
回复需要登录