【问题标题】:How to get apple's-website-like font style?如何获得类似苹果网站的字体样式?
【发布时间】:2011-04-30 17:20:09
【问题描述】:

Apple 在其网站中使用了一种带有白色阴影的字体,使其看起来像雕刻/蚀刻字体。我发现了一些技巧,但总是非常有限。 (顺便说一句,in this web site too 使用不同颜色的效果相同)

他们做了什么来获得这种字体效果并使其在所有浏览器中都能正常工作。有人知道一个脚本(javascript甚至css的东西)来获得完全相同的效果吗? 谢谢

【问题讨论】:

  • 请举例说明您所说的效果。我在您提供的链接中看不到任何特别之处。

标签: javascript jquery html css effects


【解决方案1】:

不确定您在 Apple 网站中的意思,但在另一个链接中,它是通过以下 CSS 实现的...

text-shadow: white -1px 1px;

像往常一样,最新的 CSS 东西并没有被 IE 很好地支持。我想

看起来您可以使用 Microsoft 专有的 filter 属性来实现类似的功能...

filter: Shadow(Color=#fffffff, Direction=0, Strength=1);

【讨论】:

  • 值得一提的是,并非所有浏览器都支持 text-shadow 属性,因为它不是 CSS 2.1 规范的一部分。
  • @kennis 并非所有浏览器都支持 CSS 2.1 :) 我会进行编辑。
  • 谢谢你,它真的很有帮助,但是苹果是如何让它在任何地方都能工作的,我在 IE6 中验证它工作得很好!例如这里:apple.com/iphone 在线商店/访问 Stor
  • @john 你能具体说明你指的是文本的哪一部分吗?
  • 这个:“在线订购您的 iPhone 4 并将其送到您家门口。它免费发货,随时可用。”字母周围有一个小的白色效果。它在这里更明显:apple.com/iphone/ios4 在“优雅直观的界面”段落中,例如
【解决方案2】:

郑重声明,这并不适用于所有浏览器。不确定它是否适用于任何版本的 IE,但在 FF、Chrome 和 Safari 中应该可以正常工作。

关键的 CSS 属性是 text-shadowHere's 快速参考

下面是一个例子:

<style type="text/css">
   body {
     background-color: gray;
     color: black;
     text-shadow: 0px 1px 0px white;
   }
</style>

【讨论】:

    【解决方案3】:

    我在谷歌周围做了一些嗅探,这就是苹果“据说”使用的……

    h1 {
    
    color:black;
    
    font: 35px/50px "Lucida Grande", Arial, Verdana, sans-serif;   
    
    }
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 2019-04-21
      • 2023-02-10
      • 2020-07-29
      • 2016-03-29
      • 1970-01-01
      • 2020-12-07
      • 2020-05-04
      • 1970-01-01
      相关资源
      最近更新 更多