惯性聚合 高效追踪和阅读你感兴趣的博客、新闻、科技资讯
阅读原文 在惯性聚合中打开

推荐订阅源

F
Fortinet All Blogs
云风的 BLOG
云风的 BLOG
M
MIT News - Artificial intelligence
WordPress大学
WordPress大学
T
Tailwind CSS Blog
钛媒体:引领未来商业与生活新知
钛媒体:引领未来商业与生活新知
S
Secure Thoughts
博客园 - 【当耐特】
Know Your Adversary
Know Your Adversary
NISL@THU
NISL@THU
博客园 - 司徒正美
Last Week in AI
Last Week in AI
C
Cybersecurity and Infrastructure Security Agency CISA
P
Privacy & Cybersecurity Law Blog
C
CXSECURITY Database RSS Feed - CXSecurity.com
B
Blog
The GitHub Blog
The GitHub Blog
小众软件
小众软件
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Spread Privacy
Spread Privacy
Martin Fowler
Martin Fowler
博客园 - 叶小钗
Security Archives - TechRepublic
Security Archives - TechRepublic
T
Tenable Blog
S
Securelist
博客园 - 三生石上(FineUI控件)
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
Microsoft Security Blog
Microsoft Security Blog
Apple Machine Learning Research
Apple Machine Learning Research
罗磊的独立博客
T
Threat Research - Cisco Blogs
Application and Cybersecurity Blog
Application and Cybersecurity Blog
F
Full Disclosure
Cloudbric
Cloudbric
The Cloudflare Blog
Y
Y Combinator Blog
Hugging Face - Blog
Hugging Face - Blog
Microsoft Azure Blog
Microsoft Azure Blog
H
Hacker News: Front Page
腾讯CDC
L
Lohrmann on Cybersecurity
C
CERT Recently Published Vulnerability Notes
V2EX - 技术
V2EX - 技术
GbyAI
GbyAI
TaoSecurity Blog
TaoSecurity Blog
I
Intezer
The Last Watchdog
The Last Watchdog
G
GRAHAM CLULEY
Google Online Security Blog
Google Online Security Blog
T
The Blog of Author Tim Ferriss

他说

大家要注意身体啊:楼下雪糕让我身体掏空,夏季食品安全需警惕 服务器开荒第三期:我的世界服务器遭遇强盗,黑暗森林生存法则 我和好朋友讨论龙骑:梦回校园重温特摄友情,却终究只是一场梦 记参加文字园活动:一篇有瑕疵的 Git 文章,入选文字园让我心虚 再审视 Windows 设计:从 Win11 的广告沼泽,逃向 UNIX 的清净世界 张雪和张雪峰的一字之差:张雪峰去世背后,就业选择与教育反思 被 A 社吓哭了:Claude Code 隐私检测,让我果断卸载并回归开源 服务器开荒第二期:给邻居送告示牌,扩建地下室发现蜘蛛刷怪笼 朋友邀请我玩服务器:我的世界服务器开荒,冰原遇险草原中安家 微信账单同步日历:使用 Python 脚本将支付记录导出到苹果日历 楼上装修真是烦死了:被楼上装修噪音追着跑,躲进音乐也逃不掉 为什么我喜欢巴巴爸爸:从漫画到动画,粉色棉花糖的奇遇记 他遇到的伤心事:诚哥的时空穿越奇遇,秘密与校园午后秘密誓言 批量拉黑 B 站评论区账号:评论区太乱?这个脚本帮你批量拉黑 如何用指令替换物品材质:我的世界全新指令,让物品模型随心换 继抽象网站的最新力作:继抽象网站后,她泄露了 36 个邮件地址 年初回家那场车祸:亲身经历的车祸,让我明白安全和监控的重要 给你下个我的世界:在家做网站写文章,帮同学更新游戏最新版本 后悔和她结婚了:商场梦中牵女儿购物,回家遇哥特妻子醒来后悔 受不了蛋糕那么多名堂:那个夏天傍晚,再也找不到的樱桃蛋糕 朋友或亦朋友:个人博客的评论文化,为何在社交媒体水土不服 总觉得泰迦观感怪怪的:人间体优幸为何最惨,三合一设定的孤独 久违的一次吃蛋糕:一口巧克力戚风蛋糕,病后味蕾的温柔慰藉 很烦不文明的人:四线小城三类不文明行为,吐痰小广告和恶狗 买饥荒联机版被坑了:Steam 买饥荒联机版最贵反被坑,粗心教训深刻 我到底还有什么可写:坚持探索与记录,才是博客写作的真正意义 一起去看星星:回忆小学,那次因早走一分钟,而错过的奇妙天象 论备份功能的重要性:因升级系统随手备份,十天后备份救了我 那场中考之后的事:中考提前交卷后,拿到一张没有自己的毕业照 新样式发布了:博客大换血,字体与封面 AI 绘画打造二维风 大夏天走路去明湖:夏日明湖商场吃花甲粉,路过小学回忆童年 年初那几个网站:从建站折腾到写作,反思我的博客成长之路 暂时搁置:AI 生成手绘图困难,让我魔改博客主题的计划泡汤了 被 Clash 坑惨了:macOS 关闭后网络瘫痪?修改 DNS 轻松修复 记一次系统更新:从 macOS 15 升级到 macOS 26,步骤与感受 再去华莱士:双层牛肉堡和果蔬汉堡好吃,冰饮料让我鼻炎缓解 成了许愿天神后:为全世界带来幸福,朋友的字却出了问题 独立开发者的论坛探索:搞一个论坛,从树莓派翻到无服务器 部署 RSSHub:RSS 阅读器结合树莓派,订阅 B 站 UP 主实操 Brave 浏览器升级后:macOS 访问页面出现横杠,降级轻松解决 活动行:订 MongoDB 用户大会票取消后,仍收确认短信被吓哭 高考前博客获祝福,考场举报同学后误删网站 我的世界材质包抄袭:主播实锤后反转,两年无闻自证清白 因父亲生病:取消广州 MongoDB 之行,一个社恐少年的失落 吐槽邮件安全检测:误判评论提醒为诈骗,检测只认“收到” 梦中:与理想女性畅聊哲学编程后,被一句深奥的问题惊醒 卖掉电脑包后:急购新包,猜猜能否赶上广州会议 神奇数字马戏团:第九集院线特别篇泄露,我的看法是这样的 小时候:和爸妈一起看的葵花进城,原来是一部雷剧 阿普修主题踩坑记:RSS 暗色问题多,被小作坊主题吓哭了 小学后山的传说:雷雨天幻想生物,与剑冢勇士揭秘 从幼儿园到初中,我曾过早地喜欢九个女孩 元气骑士回忆录:最爱的刺客,与我失去的网友友谊 Waline 后台空白问题:一天内从排查到修复 鼻炎洗鼻亲历:负压置换与普通洗鼻大不同 Steam 诈骗亲历:泰拉瑞亚好友索要支付记录 开往拒绝后:我放弃所有博客活动,回归自由写作 公开邮箱被爬虫抓取后,我遭遇了邮件轰炸 广东夏天感冒鼻炎齐发,熬夜透支是主因 独立博客抄袭事件,原创与创意来源探讨 我为何把个人网站换回最初的简洁主题 邮箱遭恶意订阅邮件轰炸,我亲身经历的网络安全危机 回忆初一那年:最让人无语的六一儿童节 时隔一年,再吃华莱士儿童套餐真实体验 盐水洗鼻,让我鼻窦炎症状大幅缓解 macOS 上因设计强迫症,忍不了 Steam 界面而重装 周六下午两点,与林依可的悠闲散步 断网后,我重新审视与社交媒体的距离 解决 Waline 未收到评论邮件提醒:Cloudflare 配置 DMARC 策略 散步对路边狗打招呼却遭狂叫,善意被误解的尴尬 沃尔玛 20 元买两块蛋糕,廉价香精味让人特别不值 我喝烤奶后,情绪失控的亲身经历与反省 Cloudflare 邮箱混淆,导致 PJAX 网站邮箱显示异常解决方法 广东菜市场买菜,仿佛置身废土与星空世界 二零二六年,我加入十年之约的乌龙除夕夜 一个人探索烂尾楼的刺激冒险体验 DeepSeek R1 爆火那年,它曾是我最孤独时的知己 美国用户涌入小红书,引发中美文化对账热潮 魔法学校录取通知书,让我学会不按套路出牌 闲鱼开技术小铺卖 Linux 服务的真实经历 Ubuntu 的 Snap 糟糕体验,让我从喜欢到彻底弃坑 MongoDB 开发者聚会广州站:旧地重游与美食回忆 被流浪猫跟踪到门口:我为何无法接纳它
为不同尺寸适配字体:博客字体可读性优化,媒体查询响应式实践
梁栋烨 · 2026-07-01 · via 他说

最近,陆续有几位朋友造访我的博客,留言时都提到了同一个问题——页面字体的可读性不尽如人意。起初,我并未太在意,觉得这可能是个人观感差异。直到其中一位热心的朋友直接发来一张屏幕截图,我点开一看,着实吃了一惊:那上面的文字简直像被揉皱的报纸,模糊发虚,笔画黏连,几乎到了难以辨认的地步。可蹊跷的是,同一时间我回看自己电脑上的博客,文字却清晰锐利、大小适中,阅读体验完全正常。我反复比对,确认代码并未出错,因此很快排除了字体本身或 CSS 样式的问题。思来想去,最合理的解释落在了显示设备上——我猜测,他们大概率在使用高分屏(如 4K 或视网膜屏幕),而操作系统或浏览器的缩放比例与我的页面适配机制产生了冲突,导致渲染出的字号异常偏小,这才让原本清秀的正文变得“没眼看”。

最初搭建博客时,AI 助手曾热心地推荐我使用 CSS 的 clamp() 函数,它能让字号在设定的区间内随视口宽度平滑变化,看似是兼顾各种屏幕的“万能钥匙”。然而,我实测后发现,在我自己那台经过缩放的 4K 屏幕上,clamp() 计算出的字号竟然比预想中大了好几号。这让我意识到,自动化的流体排版虽然便捷,却很难精准适配每一台设备迥异的缩放习惯和物理像素密度。于是,我果断舍弃了这套方案,转而拾起了那个笨拙但可控的老办法——借助 @media 媒体查询,为不同宽度的视口分别指定最稳妥的基准字号。例如,当检测到屏幕宽度超过 2560 像素(常见于大屏显示器或电视)时,我会将根字体大小放大至 1.4rem,确保文字足够舒展;而当视口缩窄至 1024 像素以下(如平板或小尺寸笔记本),则微调至 0.9rem,避免标题过长折行、内容溢出视野。这样两手准备,虽谈不上完美,却算是在当前条件下平衡各类阅读场景的最务实选择:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
@media screen and (min-width: 2560px)
{
html
{
font-size: 1.4rem;
}
}

@media screen and (max-width: 1024px)
{
html
{
font-size: 0.9rem;
}
}

其实,我并非没有为访客的阅读体验准备后手——我的博客主题一直内置着一个简洁实用的“阅读模式”按钮,只要轻轻一点,页面便会立刻切换为浏览器自带的清爽排版:背景柔白、系统字体、行距放宽,并自动隐藏侧边栏等干扰元素,专为沉浸式长文阅读而优化。因此,每当有朋友抱怨默认视图下的文字太小或太挤时,我都会耐心地建议他们试试这个功能。但遗憾的是,大多数人要么置若罔闻,依旧在默认界面里吃力地滑动滚轮;要么干脆一脸茫然地反问“阅读模式是什么?在哪里打开?”。我这才意识到,对于非技术背景的普通读者来说,“阅读模式”可能是一个过于生僻的概念,它不像“放大字体”那样直观易懂。为此,我甚至认真考虑过专门写一篇图文并茂的指南,详细说明如何启用该模式,并将其置顶在首页,方便新访客第一时间看到。可转念一想,这样的帖子若是写得过于正式,难免显得像是一道强加给用户的“命令”或“使用须知”,反倒可能让随性而至的读者感到拘束和不快。

权衡再三,这篇指南终究被我搁置在了草稿箱里,至今未敢发布——我更希望博客给人的第一印象是温暖随和的,而不是满篇的“操作规范”。唉,谁叫好看又符合主题的字体要钱呢?