苹果官网所使用的字体 PingHei 平黑 苹黑?(2014)

[ 下载地址位于末尾 ]

这是新的(2015):苹果官网所使用的字体 PingHei 平黑 苹黑?(2015)增加2种粗体与细体

在 iPhone6 发布之后更新了官网,于是跑去观摩了下官网,那个质感的导航条没了(至今也没看到有谁复制的一模一样),现在的导航条文字和过去一样使用 svg 来做的,效果也是不错。

另外的一点不同是,其它文字元素很多更换了字体(原先都是宋体,不过目前仍有部分位置和页面还是宋体,几个重新设计过的页面使用了该字体),不是雅黑,于是找了下叫做 PingHei,我将代码和字体下载了过来。

随后放在自己的网站测试了下,这个字体在同号文字中会显得小一些,就需要定义的大小大一些,大概差2个字号,另外一点是个别文字会无法显示则会递减到下一个字体,因此它可以作为字量不多的 UI 中使用,大小都挺美观,但无法作为大量文字的正文(因为大小只有 1M 不到,猜测在字体设计类型上节省了空间,可能并未包含全字符集,因此会有个别文字没有,介于此作为 Web端 的加载有节省的好处,中文字体的体积始终是硬伤)。

CSS 中对中文的定义是 PingHei-light.woff,而 IE8 则使用 PingHei-light.eot 并定义了不同粗细,因后者文件比较大,并且 IE8 以进入淘汰状态,建议使用前者即可。

CSS 中调用使用名称为:PingHei,中文名应该是“平黑”(我不保证就是这个)。

可以观摩下,它没有雅黑的一些粗细不一问题,这点使用在 UI 上尤其适合。(我就因此将标题弄作楷体,雅黑在高低粗细上太差了)。

压缩包内包含字体与CSS文件(CSS使用的时候修改下路劲)。

http://www.apple.com/cn/support/

/PingHei-light.woff
/PingHei-light.ttf
/PingHei-light.eot
/font-pinghei.css

Downloads : http://pan.baidu.com/s/1qW43DJu

2015.08.23 这是新的(2015):苹果官网所使用的字体 PingHei 平黑 苹黑?(2015)增加2种粗体与细体
2015.06.13 添加了对应的 ttf 格式字体,以及更换了 CSS(呃,貌似苹果官网去掉了几行)。另外名字似乎又可能,貌似可以叫 苹黑?

24 thoughts on “苹果官网所使用的字体 PingHei 平黑 苹黑?(2014)

  1. 评论嵌套到尽头了。

    现在的图片代码是

    是在 前后加吗?然后【width=202!important;】?好像不行……还有最后的 / 斜杠是什么意思呢?

    1. :?:
      CSS文件中:【width:202px!important;】
      行间代码:【style=”width:202px!important;”】你可以用这种代替【width=”202″】试试。。

      1. 可是这样的话,其他的图片就不是100%了,而是变为统一的202px了。为了在手机上浏览能够正常,图片必须自适应为100%,否则会撑出屏幕外。。

      2. 现在是202px的方式显示了,能否判定在屏幕宽度比202px小的时候,按100%显示呢?我加入了 max-width=100%!important,去掉和不去掉202px后的!important都试了一下,不起作用,永远是202px。

        1. @media (max-width: 202px) {
          【CSS内容】
          }

          自适应CSS 的写法,max 等于小于 min 等于大于。可以判断当等于小于该尺寸的时候 宽度设定为100%就好了。不过其实我觉得 现在屏幕宽度至少都有320左右吧。。。 :idea:

          1. 我的720×1280的屏幕,还是会被300px的图片撑开,好奇怪。

            我的 CSS 中和图片的相关的是:
            .img-responsive,
            .thumbnail > img,
            .thumbnail a > img,
            .carousel-inner > .item > img,
            .carousel-inner > .item > a > img {
            display: block;
            width: 100% \9;
            max-width: 100%;
            height: auto;
            }
            .img-rounded {
            border-radius: 0;
            }
            .img-thumbnail {
            padding: 0px;
            line-height: 1.42857143;
            background-color: #595959;
            border: 1px solid #dddddd;
            border-radius: 0;
            -webkit-transition: all 0.2s ease-in-out;
            -o-transition: all 0.2s ease-in-out;
            transition: all 0.2s ease-in-out;
            width: 100% \9;
            max-width: 100%;
            height: auto;
            }
            .img-circle {
            border-radius: 50%;
            }

            我对 CSS 不是特别熟练,100%后main有个 \9 是什么意思?
            我的@media需要加在哪里?加在 CSS 末尾?
            @media (max-width: 400px){
            max-width: 100%
            }

            @media (min-width: 400px){
            max-width: 100%
            }

            是这样吗?

            1. @media (max-width: 400px) { 中间的代码少了个类,正确的:

              @media (max-width: 400px) {
              .img-thumbnail {
              max-width: 100%;
              }
              }

              杠0
              杠0\9

              的意思是这个css只在IE生效,通常定义两个可以应付IE9及以上版本IE。

    1. 不同程序的模板相对路径都是不同的,CSS中的字体文件位置得改成自己的路径(我们的文件摆放位置肯定不是和苹果一样的)。

      1. 嗯,我知道了。上传了。但是发现 CSS 中有 ttf的字体,定义为 format(“truetype”); 但是下载下来的文件只有woff和eot。

        1. 大概是有这个类型但是苹果并没有放进去,如果有这个ttf在CSS中存在URL我一定是会下载过来的。woff是第一代Web字体,这个字符集并不完整体积也有1MB了,ttf的体积则可能比eot更大,也就用不着这个格式了。eot给旧IE用的,现在的浏览器都支持woff和woff2格式。

          1. 现在是我自己找到了 ttf,ttf的话和eot差不多大小,两兆。我准备首选pinghei然后第二是microsoft yahei。/* IE8 and Below
            —————– */后面的也要复制进去吗?我现在是这样的:
            @font-face {
            font-family: ‘PingHei’;
            font-style: normal;
            font-weight: 200;
            src: url(‘fonts/PingHei-light.woff’) format(“woff”), url(“fonts/PingHei-light.ttf”) format(“truetype”);
            *src:url(‘fonts/PingHei-light.eot’);
            }
            这样对吗?
            谢啦~

          2. 发现字号有点小。如果字号定义大点,那么被替换到第二种字体雅黑的字,也会变大。。不可能每次专门找出那些字,把雅黑的弄小……唉。

            1. 睡着了=.= 恩 字号大概小2个px号,大小觉得还好,主要问题还是字符集不完整,总会碰到个别没有的字,像博客这种就用不了这个字体,如果能找到完整字符集的woff或者woff2就好了。它用在导航条和一些企业或设计界面,文字不多的情况下可以避免那些字出现。

              1. 现在我的代码是这样的,不知道对不对。搜到的信息说 IE 8 以下不能定义多种类型,因此要用 ?#iefix 来干扰,让 IE 8 以为是浏览器请求,而其他浏览器会自动检索自己支持的格式。所以我不知道是否要把 eot 放在第一个选项。但是放在第一个选项之后,IE 9 以上的版本会选择 eot 吗?希望是首选 woff,如果 woff 放第一个,会不会造成 IE8 无法识别的情况呢?
                ———————————
                @font-face {
                font-family: ‘PingHei’;
                font-style: normal;
                font-weight: 200;
                src: url(‘fonts/PingHei-light.woff’);
                scr: url(‘fonts/PingHei-light.woff’) format(‘woff’),
                url(‘fonts/PingHei-light.ttf’) format(‘truetype’),
                *src: url(‘fonts/PingHei-light.eot’) format(’embedded-opentype’);
                }
                @font-face {
                font-family: ‘Glyphicons Halflings’;
                src: url(‘fonts/glyphicons-halflings-regular.eot’);
                src: url(‘fonts/glyphicons-halflings-regular.eot?#iefix’) format(’embedded-opentype’),
                url(‘fonts/glyphicons-halflings-regular.woff’) format(‘woff’),
                url(‘fonts/glyphicons-halflings-regular.ttf’) format(‘truetype’),
                url(‘fonts/glyphicons-halflings-regular.svg#glyphicons_halflingsregular’) format(‘svg’);
                }
                ———————————-
                我这里是定义了两种字体,下面那个是用在一些 icon 图形上,它的代码是原本就有的,它是 eot 写在第一项。但是它的 eot 大小本身就比较小。

                我正尝试用 FontForge 把字符变大到正常字号,应该是 1em 吧?不过软件还没搞懂,还在试。

                对了,为何不使用 Regular 呢?感觉在非高分屏下或许粗一些看得更厚实一些,light 在 IE 下还好,在 Chrome 中比较虚……

                1. icon 图标一般都有单独的 class 标记,对它进行统一的大小标注就好了。不知道你那个是什么图标样式 我推荐一个这个 http://seabye.com/blog/9408.html 我自己在设计的时候经常用的 它的 class 是 .fa.fa-?,例如这样我们对 .fa进行控制就可以了,你那个应该也会有这样的标记。关于字体粗细我没有看过平黑的其它造型,因为苹果官网这么写的,CSS部分我就原样抄下来了。

                  1. 嗯,谢谢~我后来是下载了 FontForge(开源软件)Ctrl+A之后Ctrl+\,选择均匀缩放(选项是英文)把所有字符缩放为120%,这样PingHei字体就达到正常字号了,再generate font就OK了。华文黑体为黑选,雅黑第三备选,看起来页面非常和谐。PingHei的WOFF也能被手机快速加载。现在非常完美~你也可以试试。

                    对了,我网站的图片大小为100%宽度,但是某些图片是比较特殊的,在代码中写了 width=”40%”但是毫无效果,还是按 CSS 中的100%来显示。这个改怎么办?就特殊的一张图。

                    1. 对要控制的图片做一个单独的标记 例如 class 或者 id 或者它本身就带有一个特殊标记。
                      在 CSS 选择器中强制优先级是这样的代码:width:40%!important;
                      !important 代表最高优先级,其次的知识是:行间代码(直接写在 HTML 上的 CSS 优先级默认大于 ID 和 class,同时 ID 的优先级大于 class。
                      首先是选择器要能定位到这个特殊的图片,定位到了之后40%不生效则提高它的优先级,与强制优先级代码。

    1. 应该叫“平黑”,谷歌了下有人对此的描述是:该字体在苹果大陆官网、简体中文版技术支持文档和产品说明书中都有过大量的使用,PingHei 字体由 Apple 向华文定制,基于兰亭黑,中宫比起兰亭黑收紧一些,没有喇叭口。

      1. The dress is so pretty. I'd probably consider a fancy dress. The cardi hides the straps so I think it makes a good outfit for a Fr.tnyiCoagrads on the shoe find. Finding the perfect pair with a very specific list of needs can be difficult, but satisfying when you finally find it. Love the wedges. They look like a good comfy workhorse pair.

发表评论

电子邮件地址不会被公开。 必填项已用*标注

:wink: :twisted: :roll: :oops: :mrgreen: :lol: :joy: :idea: :funny: :evil: :cry: :arrow: :?: :-| :-x :-o :-P :-D :-? :) :( :!: 8-O 8)