RSS阅读器仅支持内联样式,style标签须置于<head>中且多数仍被过滤,稳妥做法是全部使用style属性;字体用系统安全栈,字号行高用px/em单位;图片需设宽高并用inline-block包裹;链接必须显式定义颜色和下划线。

RSS阅读器只认内联样式,style标签必须写在<head>里
RSS阅读器(比如Feedly、Inoreader、Thunderbird RSS插件)解析的是XML格式的item.description字段,通常只接受HTML片段,且绝大多数会剥离<link>、外部CSS、JS,甚至过滤掉<style>放在<body>里的写法。实测中,只有<head><style>...</style></head>结构才被部分阅读器(如NewsBlur)保留,但更稳妥的方式是——全部用style属性内联。
- 别指望
class或id能生效:没有CSS文件加载,类名毫无意义 -
<style>标签若出现在<description>内容里(即作为HTML字符串嵌入),90%的阅读器直接忽略或转义为纯文本 - 真正能落地的只有:
<p style="margin:0;padding:0.5em 0;font-size:14px;line-height:1.6;"> - 字体建议用系统安全栈:
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;,避免"Noto Sans CJK"这类需下载的字体
字号、行高、间距必须用绝对单位(px或em),禁用rem和百分比
RSS阅读器不提供根元素font-size上下文,rem一律退化为浏览器默认值(通常是16px),但不同阅读器渲染引擎差异大,结果不可控;%在嵌套结构中易叠加失真。实测下来,em相对稳定(以父元素为基准,而RSS中常见结构层级浅),px最保险。
- 标题用
style="font-size:18px;font-weight:bold;margin:12px 0 6px;",别写1.125rem - 正文段落推荐
font-size:14px;line-height:1.6;(约22.4px行高),太小看不清,太大挤占屏幕 - 垂直间距统一用
margin-top/margin-bottom,不用padding:部分阅读器会重置padding或合并相邻块级元素 - 避免
min-height、max-width等响应式属性:RSS阅读器不触发媒体查询,也不支持视口概念
图片必须带width和height属性,且优先用inline-block包裹
RSS阅读器不会执行JS,无法动态计算图片尺寸;不设宽高会导致布局塌陷、文字环绕错乱,甚至整段内容被截断。某些阅读器(如Feedly Web版)还会强制给<img>加display:block,导致文字无法自然换行到图片右侧。
- 正确写法:
<span style="display:inline-block;vertical-align:top;"><img src="..." width="320" height="180" style="vertical-align:top;"></span> - 别依赖
max-width:100%:它需要CSS生效前提,而这里没有 - 如果图片要右浮动,用
style="float:right;margin:0 0 0.5em 0.8em;",并确保父容器有overflow:hidden(但RSS中难实现),更稳的做法是图文分段,不强行混排 - SVG慎用:部分阅读器不渲染
<svg>,优先用PNG/JPG
超链接颜色和下划线必须显式声明,别信用户代理样式
RSS阅读器对a标签的默认样式五花八门:Feedly用蓝色无下划线,Inoreader加粗带下划线,NewsBlur则完全继承系统链接色。不声明就等于放弃控制权,用户可能根本看不出哪段是可点击的。
立即学习“前端免费学习笔记(深入)”;
- 最低限度加:
style="color:#0066cc;text-decoration:underline;" - 访问后状态(
:visited)无效,不用管;:hover也无效,别写 - 如果想弱化链接视觉权重,可用
color:#333;text-decoration:none;border-bottom:1px dotted #999;,但需测试是否被阅读器过滤掉border - 绝对路径优先:
href="https://example.com/post",相对路径在RSS中极易解析失败
最麻烦的不是写多少样式,而是每次改一个margin都得重新生成RSS、刷新阅读器、手动验证——因为缓存、预加载、XML转义等问题会让改动延迟数分钟才可见。建议把常用样式写成模板片段,复制粘贴前先用浏览器开发者工具模拟内联渲染效果。


















