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

推荐订阅源

H
Hackread – Cybersecurity News, Data Breaches, AI and More
C
Check Point Blog
Hacker News: Ask HN
Hacker News: Ask HN
cs.CL updates on arXiv.org
cs.CL updates on arXiv.org
WordPress大学
WordPress大学
P
Proofpoint News Feed
V
Visual Studio Blog
C
Cyber Attacks, Cyber Crime and Cyber Security
N
Netflix TechBlog - Medium
C
CXSECURITY Database RSS Feed - CXSecurity.com
博客园 - 聂微东
Threat Intelligence Blog | Flashpoint
Threat Intelligence Blog | Flashpoint
博客园 - 叶小钗
Cisco Talos Blog
Cisco Talos Blog
S
Schneier on Security
T
Threat Research - Cisco Blogs
腾讯CDC
cs.AI updates on arXiv.org
cs.AI updates on arXiv.org
The Hacker News
The Hacker News
Google DeepMind News
Google DeepMind News
Microsoft Security Blog
Microsoft Security Blog
奇客Solidot–传递最新科技情报
奇客Solidot–传递最新科技情报
GbyAI
GbyAI
N
News | PayPal Newsroom
L
LINUX DO - 最新话题
酷 壳 – CoolShell
酷 壳 – CoolShell
P
Palo Alto Networks Blog
T
Tenable Blog
S
Secure Thoughts
T
Threatpost
V2EX - 技术
V2EX - 技术
大猫的无限游戏
大猫的无限游戏
Martin Fowler
Martin Fowler
freeCodeCamp Programming Tutorials: Python, JavaScript, Git & More
Vercel News
Vercel News
罗磊的独立博客
P
Privacy & Cybersecurity Law Blog
Engineering at Meta
Engineering at Meta
小众软件
小众软件
Google DeepMind News
Google DeepMind News
N
News and Events Feed by Topic
Y
Y Combinator Blog
CTFtime.org: upcoming CTF events
CTFtime.org: upcoming CTF events
C
Cybersecurity and Infrastructure Security Agency CISA
P
Proofpoint News Feed
L
Lohrmann on Cybersecurity
P
Privacy International News Feed
H
Heimdal Security Blog
量子位
B
Blog

他说

大家要注意身体啊:楼下雪糕让我身体掏空,夏季食品安全需警惕 服务器开荒第三期:我的世界服务器遭遇强盗,黑暗森林生存法则 我和好朋友讨论龙骑:梦回校园重温特摄友情,却终究只是一场梦 记参加文字园活动:一篇有瑕疵的 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;
}
}

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

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