字体样式问题~如何使 html css 中的字体平滑/强

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/7658145/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 10:57:05  来源:igfitidea点击:

Font Styling Issue ~ how to make font smooth/Strong in html css

htmlxhtmlcssfonts

提问by Anne

I have Font Verdana + Bold + 16pt + Stong in PSD So In html Conversion, we have Font-family: Verdana + Font-weight:bold + Font-Size:16pt + What for Strong ? (strong html tag is not working for this )

我在 PSD 中有 Font Verdana + Bold + 16pt + Stong 所以在 html 转换中,我们有 Font-family: Verdana + Font-weight:bold + Font-Size:16pt + What for Strong?(强 html 标签对此不起作用)

there are 5 Font Styles there in PSD Sharp , Crisp, Strong , Smooth ,None

PSD Sharp、Crisp、Strong、Smooth、None 中有 5 种字体样式

so I don't know how to make Font Strong, Smooth, Sharp etc

所以我不知道如何使字体强大、平滑、锐利等

How can i resolve this issue in all browsers (old + new).

如何在所有浏览器(旧 + 新)中解决此问题。

Thanks.

谢谢。

采纳答案by DBUK

http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/might help solve the issue of text looking a bit less crisp in older Internet Explorers.

http://webtypography.net/Harmony_and_Counterpoint/Size/3.1.1/可能有助于解决文本在较旧的 Internet Explorer 中看起来不太清晰的问题。

As for having a bit more control over the font presentation - light, bold, medium etc I would recommend choosing a nice readable serif or san serif font from www.fontsquirrel.com, most font families will come with a variety of weights that you can play with - run up some spans for different weights.

至于对字体表示有更多的控制 - 浅色、粗体、中等等,我建议从 www.fontsquirrel.com 选择一种可读的衬线字体或 san serif 字体,大多数字体系列都带有您可以使用的各种粗细玩 - 为不同的重量运行一些跨度。

回答by Aaron Digulla

Sharp, Crisp, Strong, and Smooth are special font effects that affect how Photoshop renders anti-aliased text. There is no equivalent in CSS as far as I know.

Sharp、Crisp、Strong 和 Smooth 是影响 Photoshop 渲染消除锯齿文本的方式的特殊字体效果。据我所知,CSS 中没有等价物。

What you can try is using CSS effects to scale/transform the text yourself but you will probably have to that for every letter of the text individually, possibly for each browser, certainly for each OS (because the same font is rendered differently in Windows, Mac and Linux).

您可以尝试使用 CSS 效果来自己缩放/转换文本,但您可能必须针对文本的每个字母单独使用 CSS 效果,可能针对每个浏览器,当然针对每个操作系统(因为相同的字体在 Windows 中呈现不同, Mac 和 Linux)。

If this matters to you, the usual approach is to replace the text with a background image using Fahrner Image Replacement (FIR). This shows the text as a fallback or the image with your nicely anti-aliased font.

如果这对您很重要,通常的方法是使用Fahrner Image Replacement (FIR)将文本替换为背景图像。这将文本显示为后备或带有很好的抗锯齿字体的图像。