自定义字体测试Bookmarklet无法正常工作，寻求解决方法

针对你的自定义字体Bookmarklet无法工作的问题，按以下步骤逐一排查：

1. 修正占位符IP与端口 #

代码中192.???.?.????和????都是占位符，必须替换为手机Simple HTTP Server实际的局域网IP和服务端口：

• 打开手机上的Simple HTTP Server应用，它会显示当前的访问地址（比如http://192.168.3.4:8000），把这个IP和端口替换到Bookmarklet和CSS文件的所有URL中。
• 注意CSS里woff2和woff的IP不一致（一个是192.???.?.????，一个是192.???.1.????），必须统一成正确的IP，否则其中一个字体文件会加载失败。

2. 解决混合内容与CORS限制 #

• 混合内容问题：如果测试的网站是HTTPS协议，浏览器会阻止加载HTTP协议的样式表和字体（现代浏览器默认禁止HTTPS页面加载HTTP资源）。解决方法：要么测试HTTP协议的网站，要么给手机的HTTP服务器配置HTTPS（部分Simple HTTP Server支持该功能）。
• CORS问题：即使是HTTP网站，浏览器可能因跨域规则拦截资源。可以在手机的HTTP服务器中启用CORS（部分应用自带该选项），若浏览器Console控制台出现No 'Access-Control-Allow-Origin' header相关错误，需配置服务器添加Access-Control-Allow-Origin: *响应头。

3. 修复Bookmarklet代码格式与加载时机 #

• 代码单行化：Bookmarklet要求为单行代码，多行代码可能导致浏览器解析失败。将你的JavaScript压缩为单行：

javascript:(function(){var head=document.getElementsByTagName('HEAD')[0];var link=document.createElement('link');link.rel='stylesheet';link.href='http://你的手机IP:端口/elle/stylesheet.css';link.type='text/css';link.charset='UTF-8';link.onload=function(){document.body.style.fontFamily="'elle-2aregular', sans-serif, georgia"};head.appendChild(link);})()

• 字体加载时机：原代码直接设置body字体，可能样式表和字体还未加载完成，浏览器会 fallback 到默认字体。添加link.onload事件，等样式表加载完成后再设置字体，确保字体已就绪。

4. 用浏览器开发者工具定位问题 #

按F12打开开发者工具，查看两个关键标签：

• Console：查看是否有语法错误、资源加载失败的报错信息，直接定位问题根源。
• Network：查看stylesheet.css和字体文件的加载状态：
  • 若为404状态：说明路径错误，检查URL中的IP、端口、文件路径是否正确。
  • 若为拦截状态（状态码为0）：大概率是混合内容或CORS问题。

内容的提问来源于stack exchange，提问作者Peter McNaught