尝试在 CSS 中使用 'Tw Cen MT Condensed Extra Bold' 字体

Trying to use 'Tw Cen MT Condensed Extra Bold' font in CSS

在我的网站中,我希望我的页眉使用 'Tw Cen MT Condensed Extra Bold' 字体。但是,我只能使用 'Tw Cen MT Condensed' 创建字体,即使添加了粗体效果,它看起来也不一样。我在 photoshop 中创建了横幅,现在我想复制 CSS.

中的文本

下面是我在 Fiddle 上的当前代码的 link。下面是我想通过 Photoshop 创建的文本示例。

此外,有没有办法让我可以将背景中的相同图案添加到文本中?

如果一切都失败了,我可以将文本本身作为图像上传到网站上,但我只会在不得已的情况下这样做。

谢谢。

Link to Fiddle

Banner I want to create

您需要找到该字体的网络字体版本以获得最佳效果,您可以 google 找到它,或者如果该字体的许可证允许您创建一个,您可以这样做。

好的是

http://www.fontsquirrel.com/tools/webfont-generator

并且您必须将这些文件与 html 和 css 一起包含才能加载它,否则没有该字体的人将无法看到它并且系统将默认为不同的字体。

不幸的是,它不会工作,因为字体是 "non-standard"——如前所述。

要获得您想要的外观,请在您的图像编辑器(Photoshop?)中创建您想要的文本横幅并将其保存为“.png”图像文件,将 Photoshop 指向 "keep transparency"(我是使用不同的图像编辑器,因此 Photoshop 中的命令措辞可能会有所不同)。为了最小化文件大小,将图像框架栏设置为尽可能靠近字体(“.png”覆盖的区域越多,文件大小就越大——包括清晰的 space——大小差异似乎[按平方]呈指数增长)。

您剩下要做的就是在 div 中操纵文本横幅的位置(浮动、填充、边距等)。

我知道这不是您想要的答案,但它确实有效——而且您不必担心针对不同浏览器、脚本拦截器等的应急代码(您仍然需要为很少有人仍然阻止图像和可访问性标准,但恕我直言,它比编写应急代码更有效——也更清晰——并且必须允许这种字体与指定系列中的 widest/narrowest 应急字体之间的可变性。

页面的至少一部分在几乎所有浏览器中呈现相同。