我正在使用以下代码将 Twitter 提要带到我的站点,代码在 https://publish.twitter.com/ 中有描述。
<a class="twitter-timeline" href="https://twitter.com/ACCOUNT-HERE" data-tweet-limit="3">Tweets by</a>
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>
提要正确显示。但是它使用通过 Twitter 提供的 CSS。
当我使用 Chrome 开发工具检查它时,我可以在推文周围看到以下类:
<p class="timeline-Tweet-text" lang="en" dir="ltr">
所以我认为在 CSS 中定位这个是一个简单的例子,例如
.timeline-Tweet-text {
}
但是,这不会对推文应用任何样式。为什么不呢?
我在这里也提到了 Twitter 的指导 https://dev.twitter.com/web/overview/css但这也行不通。
我想这样做的唯一原因是小部件中使用的字体与我网站上其余 body
文本使用的字体相匹配。
最佳答案
简单地向顶级页面添加样式规则是行不通的,因为就浏览器而言,它们是两个不同且孤立的文档。
但是,使用 kevinburke 的 Customize Twitter 1.1 project ,您应该能够将 CSS 嵌入到时间轴中。它通过将指向外部 CSS 文件的链接直接注入(inject)该框架内的文档内容来实现这一点。
在凯文的发表example , 它使所有文本变白,看起来有点破损,但是当我拿这个例子并将其调整为也将背景变为红色时,我们可以看到它按预期工作,因此您可以根据需要进行任何调整,只要您有一个 CSS 文件。
请注意,这是唯一可能的,因为 Twitter 已配置 platform.twitter.com
以便它可以嵌入框架中。出于安全原因,如今许多网站都会发送 HTTP 响应 header 以防止内容被框化,从而避免人们干扰其内容。
关于html - 样式化 Twitter 提要 - CSS 不会针对 .timeline-Tweet-text,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/40674291/