在 Internet Explorer 中使用分层文本呈现真正的绳索文本

发布于 2024-09-11 21:00:17 字数 629 浏览 2 评论 0原文

我正在为 3D 文本编写一个 jQuery 插件,并为 Firefox、Chrome 和 Safari(以及其他类似的浏览器)编写一个 jQuery 插件,我使用 CSS3 文本阴影属性来渲染 3D 文本。

作为 Internet Explorer 的故障转移,我正在编写文本层以获得相同的效果。

我遇到的问题是,当我将文本放在 Internet Explorer 中的其他文本之上时,它会以相当令人讨厌的像素化形式呈现 - 并且在打开 ClearType 的情况下也不会更好。

有谁知道这个问题有什么解决办法吗?

我有一个演示此问题的示例,目前您必须单击文本才能打开“Internet Explorer 模式”(实际上在其他浏览器中渲染得很好!)

http://www.stevefenton.co.uk/cmsfiles/assets/File/thirdee.html

点击“Internet Explorer Internet Explorer 中的“模式”以查看令人讨厌的锯齿状文本 - 在另一个浏览器中执行相同操作,没有问题。

I am in the process of writing a jQuery plugin for 3D text and for Firefox, Chrome and Safari (and other similar browsers) I am using the CSS3 text-shadow property to render the 3D text.

As a fail-over for Internet Explorer I am writing layers of text to get the same effect.

The problem I have is that when I put text on top of other text in Internet Explorer it renders in a rather nasty pixelated form - and it no better with ClearType switched on.

Does anyone know of any fixes for this issue?

I have an example that demonstrates this problem, at the moment you have to click the text to switch on "Internet Explorer Mode" (which actually renders fine in other browsers!)

http://www.stevefenton.co.uk/cmsfiles/assets/File/threedee.html

Hit the "Internet Explorer Mode" in Internet Explorer to see the nasty looking jagged text - do the same in another browser and there is no issue.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(1

‘画卷フ 2024-09-18 21:00:17

这是为有同样问题的人提供的解决方案。

插件上的选项之一是“不透明度”——我使用 jQuery.css() 将其添加到元素中。从 Internet Explorer 代码路径中删除不透明度已完全解决了该问题。我现在可能可以在没有不透明度的情况下生活......

这是您可以用来复制问题的示例代码。

<h1>Click Me To See Jagged Rendering</h1>
<script type="text/javascript">
    $("h1").click( function () {
        $(this).css({ opacity: 0.5 });
    });
</script>

Here is the solution for anyone who has the same problem.

One of the options on the plugin was for "opacity" - which I was adding to the element using jQuery.css(). Removing the opacity from the Internet Explorer code path has resolved the problem entirely. I can probably live without the opacity for now...

Here is sample code you can use to replicate the problem.

<h1>Click Me To See Jagged Rendering</h1>
<script type="text/javascript">
    $("h1").click( function () {
        $(this).css({ opacity: 0.5 });
    });
</script>
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文