Skip to content

Instantly share code, notes, and snippets.

@bitinn

bitinn/note-on-osx-pingfang.md

Last active November 3, 2022 13:47
Show Gist options
  • Save bitinn/42c95ed95aa3dcf155e2 to your computer and use it in GitHub Desktop.
Save bitinn/42c95ed95aa3dcf155e2 to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. bitinn renamed this gist Jun 10, 2015. 1 changed file with 0 additions and 0 deletions.
    0 note-on-osx-pingfang → note-on-osx-pingfang.md
    View file
    File renamed without changes.
  2. bitinn created this gist Jun 10, 2015.
    78 changes: 78 additions & 0 deletions note-on-osx-pingfang
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,78 @@
    # What's this about?

    OS X 10.11, aka El Capitan, comes with a new system font for Chinese users, named [PingFang](http://www.apple.com/osx/elcapitan-preview/#international), it includes 6 weights for both Simplified and Traditional Chinese. The same font also appear on iOS 9 as the default UI font, though Apple didn't mention it explicitly.

    # How to get it?

    If you are in Apple Developer Program (costs 99 USD a year), then you can get them now at [their developer resource site](https://developer.apple.com/resources/), otherwise you can wait for [their public beta](http://beta.apple.com/) to come out in July or wait for the public release this fall (a free upgrade like previous release).

    Or you can get `PingFang.ttc` from your developer friends, though you are probably violating its font license one way or another, but I am not a lawyer so freedom to you.

    # What's it good for?

    1. **More distinctive font weights** are a welcome change, given the default `Heiti` only offer 2 weights and its medium weight just doesn't cut it when you need proper bold text.
    2. **Better design in general**, the `Heiti` had been the default font for a long time and its appearance, especially on the web, is subpar at best.
    3. **1 more choice for Chinese fonts**, when it comes to iOS Safari, `Heiti` used to be our only choice, now there is pleasing alternative, should you need a font that works better with Latin letters.

    # How to use it?

    If you are on iOS 9 or OS X 10.11, it's already there. Otherwise install the `PingFang.ttc` via Font Book.

    Note that you won't be able to see it appearing in the Font Book, why? Because its actual name is `.PingFang` SC/TC, the leading dot signify itself as a system fallback font, thus Font Book is not giving us the preview.

    But you can find them under `~/Library/Fonts` with manual install, other it's likely under `/System/Library/Fonts/` but see [apple kb](https://support.apple.com/en-is/HT201722) for better explanation.

    # Windows users

    Making font works cross-platform is the Holy Grail of font conversion, particularly for fonts designed with only OS X in mind.

    Because OS X and Windows can't agree on a standard for TrueType, There are 2 different ways to set tables for `ttf` (TrueType/OpenType) and `ttc` (TrueType Collection), so you need some conversion tools to make `PingFang.ttc` work on Windows.

    1. To unpack TrueType Collection into TrueType files for each font weight, use this [ttc2ttf python port](https://gist.github.com/kayahr/2479682).
    2. Now to get Windows compatible TrueType files, use [CrossFont](http://www.acutesystems.com/scrcf.htm), it's a commercial ware but comes with free trial. I would love to see an open source alternative that only require minimal setup to get this conversion done. I tried [FontForge](http://fontforge.github.io/en-US/) script with simple `Open`/`Generate` but didn't see a way to set them to use Windows compatible font tables.
    3. Lastly but optionally, if you somehow want to subset `PingFang` and embed it on webpage, note that you should change its `fsType`, aka [Embedding Protection](http://en.wikipedia.org/wiki/TrueType#Embedding_protection) flag to `0`, for it to work on browsers like Internet Explorer. Using [ttembed-js](https://github.com/thegregorator/ttembed-js) you can easily achieve that, but this is very likely a violation of font license.

    # On the web

    While `PingFang` (苹方／萍方) is the new default for OS X and iOS UI, Safari still default to `Heiti` by default, presumably to maintain backward compatibility.

    However, as a FrontEnd designer you can make use it today.

    The simple way:

    ```
    font-family: ".PingFang-SC-Regular", sans-serif;
    ```

    The complex-but-give-you-more-control way:

    ```
    font-family: ".PingFang SC", sans-serif;

    @font-face {
    font-family: ".PingFang SC";
    font-weight: 500;
    src: local(".PingFang-SC-Medium");
    }

    @font-face {
    font-family: ".PingFang SC";
    font-weight: 400;
    src: local(".PingFang-SC-Regular");
    }

    @font-face {
    font-family: ".PingFang SC";
    font-weight: 300;
    src: local(".PingFang-SC-Light");
    }
    ```

    Using tools like [CharacterMap](http://bluejamesbond.github.io/CharacterMap/) and [opentype.js font inspector](http://nodebox.github.io/opentype.js/font-inspector.html) you can figure out more about `PingFang`. But as a tip `postScriptName` under naming table is usually your best bet for a cross-platform css font name.

    # Live demo

    With `PingFang` installed or using OS X 10.11 / iOS 9, visit [https://mai3.me/](https://mai3.me/), the main content is using `PingFang` by default.

    Let me ([@bitinn](https://twitter.com/bitinn)) know if there is anything amiss.