How does the website use the pinghei font of Apple?

Apple released the iPhone 6 Chinese official website using the pinghei font. The font file size is about 2 MB, but the Chinese display is really nice, especially after resizing, it looks much better than, the following figure shows the pinghei-based publicity on the official website when iPhone 6 was released.

 

Since the pinghei font looks so nice, how can we use it on our website? The blogger deducted the code from the website. The following describes the method, which is very simple ~

1. First, you need to load the font library. The official website of Apple uses the parameter to call the font library.

If you do not want to use an Apple file, you can call it by yourself. The code for this file is as follows:

The code is as follows:

Copy code

@ Font-face { Font-style: normal; Font-weight: 200; Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.woff") format ("woff"), url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.ttf") format ("truetype "); * Src: url (''); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ } /* IE8 and Below -----------------*/ @ Font-face { * * Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.eot? ") Format (" eot "); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ } @ Font-face { * * Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-light.eot? ") Format (" eot "); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ } @ Font-face { * * Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-text.eot? ") Format (" eot "); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ } @ Font-face { * * Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-text.eot? ") Format (" eot "); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ } @ Font-face { * * Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-semibold.eot? ") Format (" eot "); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ } @ Font-face { * * Src: url ("http://www.apple.com/wss/fonts/PingHei/v1/PingHei-bold.eot? ") Format (" eot "); /* Copyright (c) 2000-2008, Changzhou SinoType Technology Co., Ltd. All rights reserved .*/ }

After loading the font library, you can directly use the pinghei font. The called css is:
"PingHei ";

Follow the above steps to use the Apple pinghei font on your website ~

If you do not want to use an Apple font file, you can download it and call it by yourself.