WhiteHouse.gov 上的这个字体是什么，我如何使用 CSS 来创建这个图像？ [关闭]答案

【问题标题】：What is this font on WhiteHouse.gov, and how can I use CSS to create this image? [closed]WhiteHouse.gov 上的这个字体是什么，我如何使用 CSS 来创建这个图像？ [关闭]
【发布时间】：2019-07-20 17:57:10
【问题描述】：

这张来自白宫的图片中的字体看起来非常专业。什么是字体？只是 Times New Roman 吗？

另外，有人知道如何使用 CSS 来创建如下图所示的内容吗？（所以我可以保留该图像中的所有其他内容，但更改文本）

谢谢！！

_{（来源：whitehouse.gov）}

【问题讨论】：

这真的是一个如何使用 Photoshop 的问题，而不是一个编程问题。
我希望我至少可以在不学习 Photoshop 的情况下让字体在 html/css 中工作。
如果它是非标准字体/奇数字体，您不能保证用户会在他们的计算机上安装它。保证它实际正确渲染的唯一方法是使用图像。

标签： html css fonts

【解决方案1】：

您可以使用WhatTheFont.com 之类的字体服务来查找最接近的匹配项。

至于您的第二个问题，您可以创建一个与背景图像大小相同的表格，并使用 css 将表格的背景设置为该大小。之后，只需在表格单元格中输入文本并使用

style="text-align: center;"

使文本居中。

如上所述，您可能希望使用 Photoshop 擦除背景中的原始文本。

【讨论】：

ryanulit 说的 - 这里没有理由使用表格，我想补充一点，与应用的 CSS 相比，内联样式是次优的。

【解决方案2】：

看起来像Garamond。它与本文档中使用的字体相同：

http://www.hud.gov/united-we-serve/united-we-serve.pdf

W 内部的垂直线相互交叉是可以区分的。

为了在您的网页上成功使用该字体，它必须安装在查看它的用户的计算机上。 Garamond 是一种用于 Apple Mac 计算机的 Adobe 字体，它安装在我的 Windows XP 计算机上，所以我想几乎每个人都已经拥有它了。

【讨论】：

【解决方案3】：

你应该用什么字体来识别它。

http://new.myfonts.com/WhatTheFont/

【讨论】：

【解决方案4】：

您可以使用 SIFR 使用您的编程技巧（因此避免使用 Photoshop）创建这种类型的外观。它确实适用于动态网站。我们经常使用它（参见 h1s here）。 SIFR 上的信息是here

【讨论】：

【解决方案5】：

该文本是图像的一部分： http://www.whitehouse.gov/assets//hero/hero_bkgd_united_we_serve.jpg

【讨论】：

你认为我可以在 HTML/CSS 中使用该字体吗？
如果用户在他们的机器上安装了该字体，否则您必须让他们下载并安装它...
如果你想创建一个横幅，也许你应该在你的服务器上创建图像。考虑使用像 GD 这样的图形库以编程方式将文本添加到背景图像中。

【解决方案6】：

Cufon 可以提供在 HTML 页面中嵌入非系统字体所需的内容： http://cufon.shoqolate.com/generate/

在许可方面有一些注意事项，以及一些浏览器问题，但它在大多数情况下运行良好 - 肯定比 sifr 更好。

【讨论】：

【解决方案7】：

Garamond 现在可以通过 Adobe 获得许可，以便通过 TypeKit 与 @font-face 一起使用。

因此，借助一点 Font-face 和 CSS3 魔法，您可以很容易地创建这种效果，而无需借助图像。

【讨论】：