登录 立即注册

首页 > 绿虎论坛 > 软件开发 > 编程语言 > HTML/CSS/JS (发帖)

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

作者: @Ta

时间: 1天前

点击: 386

HTML代码


[隐藏样式|查看源码]


『回复列表(6|隐藏机器人聊天)』

1.

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

(/@Ta/2025-11-07 09:44//)

2.

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

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

(/@Ta/2025-11-07 15:05//)

3.

我已经加了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/2025-11-07 15:32//)

4.
@老虎会游泳,单独写allow="local-fonts"是可以的,但是allow="fullscreen local-fonts"不行。
(/@Ta/2025-11-07 15:45//)

5. 导入网页插件: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/2025-11-07 17:06//)

6.

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

<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>
(/@Ta/2025-11-07 21:09//)

回复需要登录

11月9日 00:24 星期天

本站由hu60wap6驱动

备案号: 京ICP备18041936号-1