blocks|key|373269|text|虽然没有“尖锐”值，但我认为CSS3+text-rendering属性是最好的方法。这一效果在较小的字体上最为明显，而在大字体上没有太大的区别。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|373270|请注意，对此的支持非常有限，但据我所知，这是唯一可用的方法。|373271|您的另一个选择(如果您使用自定义字体)是简单地获得更高质量的向量。|373272|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/CSS/text-rendering^0|J|E|J|E|0|0|0|0^^$0|@$1|2|3|4|5|6|7|R|8|@$9|S|A|T|B|C]]|D|@$9|U|A|V|1|W]]|E|$]]|$1|F|3|G|5|6|7|X|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|Y|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|Z|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]]]

While there is no "sharp" value, I think that the CSS3 <a href="https://developer.mozilla.org/en-US/docs/CSS/text-rendering" rel="nofollow"><code>text-rendering</code></a> property is the best way to go. The effect is most noticeable on smaller font-sizes and doesn't make a big difference on large fonts.

Please note that there is very limited support for this but as far as I know it is the only method available.

Your other option (if you're using custom fonts) is to simply get higher quality vectors.

blocks|key|4203282|text|除了提到的CSS3+text-rendering属性AMK之外，还有一个针对抗锯齿的Webkit+(Chrome)特定的hack：-webkit-font-smoothing:+antialiased;+(我相信默认值是subpixel-antialiased)，它很好用，因为Webkit+webfont渲染在Windows机器上可能不是很理想。A+bit+more+info+can+be+found+here。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|4203283|还有一个旧的提议的font-smooth+CSS3属性(see+here)，但据我所知，它没有实现，也没有做任何事情(至少我看不到)。|4203284|令人悲哀的现实是，你无法在网络上获得Photoshop质量的字体渲染效果，尤其是在Windows机器上。你可以通过选择好的网络字体和选择自然缩放的字体大小来弥补这一点，但你能做的就这么多了。|4203285|entityMap|0|LINK|mutability|MUTABLE|url|http://maxvoltar.com/archive/-webkit-font-smoothing|1|http://www.w3.org/TR/WD-font/#font-smooth-prop^0|A|E|1T|10|32|K|4U|X|0|0|9|B|S|8|1|0|0^^$0|@$1|2|3|4|5|6|7|T|8|@$9|U|A|V|B|C]|$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@$9|10|A|11|1|12]]|E|$]]|$1|F|3|G|5|6|7|13|8|@$9|14|A|15|B|C]]|D|@$9|16|A|17|1|18]]|E|$]]|$1|H|3|I|5|6|7|19|8|@]|D|@]|E|$]]|$1|J|3|-4|5|6|7|1A|8|@]|D|@]|E|$]]]|K|$L|$5|M|N|O|E|$P|Q]]|R|$5|M|N|O|E|$P|S]]]]

In addition to the CSS3 <code>text-rendering</code> property AMK mentioned, there is also a Webkit (Chrome) specific hack for antialiasing: <code>-webkit-font-smoothing: antialiased;</code> (I believe the default value is <code>subpixel-antialiased</code>) which is nice to use since Webkit webfont rendering can be less than ideal on Windows machines in particular. <a href="http://maxvoltar.com/archive/-webkit-font-smoothing">A bit more info can be found here</a>.

There is also an old proposed <code>font-smooth</code> CSS3 property (<a href="http://www.w3.org/TR/WD-font/#font-smooth-prop">see here</a>) but as far as I know it is not implemented and doesn't do anything (at least not that I can see).

The sad reality is that you won't get Photoshop-quality font rendering on the web, especially not on a Windows machine. You can make up for this by choosing good webfonts and picking font sizes that naturally scale nicely, but there's only so much you can do.

blocks|key|5931774|text|Firefox25添加了一个新的Mac-OS非标准属性-moz-osx-font-smoothing，等同于webkit的-webkit-字体-平滑。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|5931775|元素{|5931776|-webkit-font-smoothing:+antialiased;
-moz-osx-font-smoothing:+grayscale;|code-block|syntax|javascript|5931777|}|5931778|entityMap^0|R|N|0|0|0|0^^$0|@$1|2|3|4|5|6|7|Q|8|@$9|R|A|S|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|T|8|@]|D|@]|E|$]]|$1|H|3|I|5|J|7|U|8|@]|D|@]|E|$K|L]]|$1|M|3|N|5|6|7|V|8|@]|D|@]|E|$]]|$1|O|3|-4|5|6|7|W|8|@]|D|@]|E|$]]]|P|$]]

Firefox 25 adds a new Mac-OS-only nonstandard property -moz-osx-font-smoothing equivilent to WebKit's -webkit-font-smoothing.
<h1>element {</h1>
<pre><code>-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
</code></pre>
}

blocks|key|3722956|text|看这个example.Henrique，鲍迪解释了什么是锐化https://www.linkedin.com/grp/post/2071438-268918276的可能方法|type|unstyled|depth|inlineStyleRanges|entityRanges|offset|length|data|3722957|entityMap|0|LINK|mutability|MUTABLE|url|https://www.linkedin.com/grp/post/2071438-268918276^0|U|1F|0|0^^$0|@$1|2|3|4|5|6|7|L|8|@]|9|@$A|M|B|N|1|O]]|C|$]]|$1|D|3|-4|5|6|7|P|8|@]|9|@]|C|$]]]|E|$F|$5|G|H|I|C|$J|K]]]]

see this example.Henrique Baldy explained what are the possible way to sharp <a href="https://www.linkedin.com/grp/post/2071438-268918276" rel="nofollow">https://www.linkedin.com/grp/post/2071438-268918276</a>

Hello everyone I'm trying to use sharp property like photoshop in Css but how can I do ?

Here is my css 

<pre><code>#login_text
{
 position:absolute;
 top:10px;
 left:18px;
 font-size:13pt;
 font-weight:bold;
 font-family:Arial;

}
</code></pre>

How to make font sharp in CSS?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

大家好，我想在Css中使用像photoshop这样的锐化属性，但是我该怎么做呢？这是我的css#login_text{ position:absolute; top:10px; left:18px; font-size:13pt; font-weight:bold; font-family:Arial;}

问如何在CSS中使字体清晰？
EN

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问如何在CSS中使字体清晰？EN