如何修改WordPress站点嵌入的Twitter时间线字体样式

不需要修改任何JavaScript代码，两种实现方式按需选择即可：

方式一：嵌入代码加原生参数（仅支持预设明暗主题） #

直接在原有嵌入的<a>标签中添加data-theme参数，只能切换官方预设的明暗两套配色，无法自定义指定色值、更换字体。
添加参数后的示例代码：

<a class="twitter-timeline" data-width="auto" data-height="300" data-chrome="nofooter noheader noborders transparent" data-theme="light" href="原嵌入代码内的Twitter主页地址">Tweets by PeterSmith</a> 
<script async src="https://platform.twitter.com/widgets.js" charset="utf-8" ></script>

• data-theme="light"：浅色模式，默认深色字体
• data-theme="dark"：深色模式，默认浅色字体

方式二：Astra主题自定义CSS（支持自定义字体颜色、字体，推荐） #

直接在Astra主题自带的CSS片段面板添加代码即可，不需要修改原有嵌入代码，可自由调整推文正文、头部的字体颜色，也能指定字体。
操作步骤：

• 登录WordPress后台，进入「外观-自定义-额外CSS」面板
• 粘贴下方代码，修改代码里的颜色值、字体名为你需要的样式，保存发布即可

/* 自定义Twitter时间线基础字体、正文文字颜色 */
.twitter-timeline {
  font-family: "替换为你需要的字体名称", system-ui, sans-serif !important;
  color: #2d2d2d !important; /* 替换为你需要的推文正文颜色色值 */
}

/* 自定义时间线头部文字颜色 */
.twitter-timeline::part(header) {
  color: #000000 !important; /* 替换为你需要的头部文字颜色色值 */
}

/* 兼容异步加载的iframe组件样式 */
iframe[id^="twitter-widget-"] {
  font-family: "替换为你需要的字体名称", system-ui, sans-serif !important;
}

注意：如果样式不生效，可以在原有嵌入的<a>标签里添加data-dnt="true"参数，关闭Twitter个性化追踪的同时提升自定义样式优先级。不要尝试直接写CSS选择器修改iframe内部元素类名，跨域限制会导致这类写法完全失效。

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