网站标题横幅的文本与图像？
我正在创建的网站的横幅标题文本相当大。使用普通字体会使其看起来非常锯齿状，但看起来抗锯齿图像的下载量相当大。哪种方式是最佳选择，或者对于大型标题有更好的方法吗？
这是带有纯文本的横幅。缩小后并不那么明显，但全尺寸时它的宽度约为 600 像素。单独打开图像以获得完整效果：
The website I am creating has a fairly large title text for its banner. Using a plain font gives it a very jagged look, but it seems like an anti-aliased image would be a fairly large download. Which way would be the best choice, or is there a better method for large titles?
Here is the banner with pure text. Scaled down it is not as noticeable, but full size it's about 600px across. Open the image separately for the full effect:
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
就锯齿而言，某些字体比其他字体更好。话虽这么说，与文本颜色相同且具有一个像素模糊的无位移文本阴影将解决大多数情况下的问题：
我发现它足以对字体进行抗锯齿，如果我不使用文本阴影来实现任何其他效果，对于任何相当现代的东西来说，它都是一个很好的解决方案。较旧的浏览器（您知道您是谁）会出现锯齿，但您无法赢得所有锯齿。
Some fonts are better than others where the jaggies are concerned. That being said, a no-displacement text shadow the same color as the text with a blur of one pixel will cure what ails ya most of the time:
I've found that it's just enough to antialias the font, and if I'm not using the text-shadow for any other effects, it's a good solution for anything even reasonably modern. Older browsers (you know who you are) will get the jaggies, but you can't win 'em all.
图像是我要走的路。有技术可以使图像尺寸更小，而不会放弃太多的术语的质量。另外，第一次下载后，它可以被缓存，因此不需要再次下载。
Image is the way i would go. There are techniques out there for making the image smaller in size without giving up too much in terms of quality. Plus, once it's downloaded the first time, it can be cached so it won't need downloaded again.
我始终建议不要使用图像作为文本内容。现代浏览器具有内置的抗锯齿功能，因此大字体看起来比几年前要好得多。 （而且它正在变得越来越好。）此外，使用诸如
之类的标记可以让您保留标题的语义值，当您使用< 时，该语义值就会丢失。 img>标签或 CSSbackground-image。I would always advise against using images for text content. Modern browsers have built-in anti-aliasing capabilities, so large fonts look much better than they did a few years back. (And it's getting better by the day.) Also, using markup such as
<h1>allows you to retain the semantic value of your title, which is lost when you use an<img>tag or a CSSbackground-image.