开发者

How to get apple's-website-like font style?

开发者 https://www.devze.com 2023-03-02 12:49 出处:网络
Apple uses in it\'s web site a font with a kind of white shadow that make it look like a engraved/etched font. I found some tricks but it\'s always very limited. (btw the same effect is used in this w

Apple uses in it's web site a font with a kind of white shadow that make it look like a engraved/etched font. I found some tricks but it's always very limited. (btw the same effect is used in this web site too with differen开发者_如何转开发t color)

What they do to get this font effect and make it work in all browsers. Someone know a script (javascript or even css stuff) to get the exact same effect ? Thank you


Not sure about where you mean in the Apple site, but in the other link, it is achieved with the following CSS...

text-shadow: white -1px 1px;

As usual, the latest CSS stuff isn't so well supported by IE. I'd imagine < IE9 won't support this property.

It looks like you can use the Microsoft proprietary filter property to achieve something similar...

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


For the record, this doesn't work in all browsers. Not sure if it works in any version of IE, but in FF, Chrome, and Safari it should work fine.

The key CSS attribute is text-shadow. Here's a quick ref

An example follow:

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


I did some sniffing around google and this is what apple "supposedly" uses...

h1 {

color:black;

font: 35px/50px "Lucida Grande", Arial, Verdana, sans-serif;   

}
0

精彩评论

暂无评论...
验证码 换一张
取 消

关注公众号