继上一篇之后,我们已经大概了解,Safari 阅读器页面本质上也是一个网页,和普通页面一样,同样由 HTML 元素组成,既然如此,几乎可以重新将其排版为任何样式——懂得 HTML 和 CSS 代码者,恐怕会摩拳擦掌,想到各种魔改技巧,不过且让我们打住,只聚焦一个具体场景:调整阅读模式的字体大小。
多数读者第一反应,或许是感到多此一举:Safari 本身就可以调整阅读模式的字体大小啊,不仅如此,还能切换不同主题呢!然而,Safari 只能调整其显示的字体大小,打印时却还是同一个字号,而其固定字体明显偏大,好像在用老人机,并不舒服。
此事也可以借 HTML 解决。与上一次不同,此番我们不必手动修改 HTML 代码,转而使用另一项技术:Javascript。大体上可以认为,借用 Javascript,可以把网页修改成任何样式,而区区调整字体,也是小事一桩。以下代码是我向 ChatGPT 讨来的,用于将网页上的字体整体调整到 90% 大小,你可以另行修改其中的数值。
// 获取当前网页上所有元素
const allElements = document.querySelectorAll('*');
// 循环遍历所有元素
for (const element of allElements) {
// 获取元素的计算样式
const computedStyle = window.getComputedStyle(element);
// 获取元素的字号大小
const fontSize = computedStyle.fontSize;
// 将字号大小转换为数字,去掉单位
const fontSizeValue = parseFloat(fontSize);
// 如果获取的字号大小有效,将其缩小为90%
if (!isNaN(fontSizeValue)) {
element.style.fontSize = (fontSizeValue * 0.9) + 'px';
}
}
拷贝代码后,按下 ⌥Option-⌘Command-I
