styles.less の編集による Atom での詳細なフォント設定

Atom エディタでエディタ部分のフォントを設定する際は通常は設定タブから指定してその内容は `config.cson` に記述されますが，`styles.less` からも設定できます。また，こちらで設定するほうが通常より柔軟な指定が可能になります。

# 動機
もともと極細のウェイトが好みで，和文文字も網羅しているコーディング向けの高品質なフォントである [Source Han Code JP](http://github.com/adobe-fonts/source-han-code-jp) の ExtraLight を Atom で愛用していましたが，ラテン文字にイタリック体が用意されておらずシンタックステーマ次第では統一感を欠くことだけが玉に瑕でした。そんな折，今年の7月に [Source Code Pro](http://github.com/adobe-fonts/source-code-pro) にイタリック体が追加されたのを知り Source Code Pro と [Source Han Sans](http://github.com/adobe-fonts/source-han-sans) を併用しようとしたところ，少々つまづいたのでその対処法です。

__追記：__ 2015 年 11 月 29 日にラテン文字のイタリックのほかギリシャ文字やキリル文字などに対応した [Source Han Code JP version 2.000](https://github.com/adobe-fonts/source-han-code-jp/releases/tag/2.000R) がリリースされ，特別な理由がない限り Source Code Pro と Source Han Sans を併用する必要はなくなりました。時間があれば本稿で紹介したコードも Source Han Code JP version 2.000 用に書き直すかもしれません。

OS X 10.10.3 および Atom 1.0.11 での動作を確認しています。

# 注意
本稿は Atom のフォーラムで私がした[質問](http://discuss.atom.io/t/how-can-i-select-plural-fonts-one-for-roman-and-another-for-italic-in-atom/20611)で得られた回答を許可を得て日本語訳と少々の改変をしたものです。

# 問題
Atom の設定画面で Font Family に `SourceCodePro-ExtraLight` を指定すると，ローマン体はたしかに Source Code Pro ExtraLight になりますが，イタリック体は Source Code Pro ExtraLight Italic にはなりません。ためしに `SourceCodePro-ExtraLight` の後ろに愚直に `SourceCodePro-ExtraLightIt` を指定してもだめでした。

![スクリーンショット 2015-09-09 22.51.54.png](https://qiita-image-store.s3.amazonaws.com/0/92856/e7b7a07e-4890-131d-ed20-8cfef871e0f4.png)

本稿で紹介する方法は今回のように__各フォントファミリー中で標準のウェイト[^3]以外のウェイトを利用したい場合__に特に有効です。ウェイトを特に指定しない場合は `config.cson` で事が済みますが Atom の整形をできるだけ `styles.less` に一元化したい方などにもオススメです。
[^3]: ウェイトを明示しなかった場合に使用されるウェイト。Source Code Pro や Source Han Sans でいう Regular。

# 解決法
## `font-family` の作成
まず，使用したいフォントを使って `font-family` を定義します。ここではラテン文字用の `font-family` を `AdobeOpenSourceFont-Latin`，和文文字用の `font-family` を `AdobeOpenSourceFont-CJK` とします[^1]。
[^1]: 当初は和文文字側で `unicode-range` を指定して一つの `font-family` にまとめようとしていたのですが，ラテン文字のグリフも Source Han Sans が設定されてしまうので，このように分けました。

まず，通常の要領でラテン文字の `normal` のフォントを指定します。

```css
@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    src: local(SourceCodePro-ExtraLight);
}
```
続いてイタリック体，ボールド体，ボールドイタリック体のフォントを指定しますが，`font-weight` で `bold` と言葉で指定してもなぜか上手く機能しないので数値で `500` と指定します。`normal` のウェイトが ExtraLight なので，それに合わせて `500` は Medium にしました。

```css
@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    font-style: italic;
    src: local(SourceCodePro-ExtraLightIt);
}

@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    font-weight: 500;
    src: local(SourceCodePro-Medium);
}

@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    font-style: italic;
    font-weight: 500;
    src: local(SourceCodePro-MediumIt);
}
```

次に和文文字についても同様に指定します。「エディタで日本語の文書は書かないし，コメントにも日本語は使わない」という方はもちろん省略して構いません。ただ，設定しておいて特に損もないかと思います。

```css
@font-face {
    font-family: AdobeOpenSourceFont-CJK;
    src: local(SourceHanSans-ExtraLight);
}

@font-face {
    font-family: AdobeOpenSourceFont-CJK;
    font-weight: 500;
    src: local(SourceHanSans-Medium);
}
```
和文文字にイタリック体に相当するものは通常ないので指定しませんが，上記の設定で勝手に斜めに変形します[^2]。
[^2]: 和文文字の斜体の是非はさておき。

## `font-family` の読み込み
あとは上で定義した `font-family` を設定するだけです。このとき， `!important` を宣言して優先度を上げます。

```css
atom-text-editor::shadow * {
    font-family: AdobeOpenSourceFont-Latin, AdobeOpenSourceFont-CJK !important;
}
```

## 結論
最終的なコードとその結果は次のようになります。

```css
@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    src: local(SourceCodePro-ExtraLight);
}

@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    font-style: italic;
    src: local(SourceCodePro-ExtraLightIt);
}

@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    font-weight: 500;
    src: local(SourceCodePro-Medium);
}

@font-face {
    font-family: AdobeOpenSourceFont-Latin;
    font-style: italic;
    font-weight: 500;
    src: local(SourceCodePro-MediumIt);
}

@font-face {
    font-family: AdobeOpenSourceFont-CJK;
    src: local(SourceHanSans-ExtraLight);
}

@font-face {
    font-family: AdobeOpenSourceFont-CJK;
    font-weight: 500;
    src: local(SourceHanSans-Medium);
}

atom-text-editor::shadow * {
    font-family: AdobeOpenSourceFont-Latin, AdobeOpenSourceFont-CJK !important;
}
```

![スクリーンショット 2015-09-09 23.36.26.png](https://qiita-image-store.s3.amazonaws.com/0/92856/852f98f6-83f8-c590-0733-028a0d089bad.png)

# 雑感
見た目の管理を一元化できるという別のメリットもあるとはいえ，本来用意されている設定法を利用しないのも正攻法じゃない感があるので，Atom 公式の設定タブから今回と同様の設定ができるようになると嬉しいですね。

# 参考文献
* [How can I select plural fonts, one for roman and another for italic, in Atom? - support - Atom Discussion](http://discuss.atom.io/t/how-can-i-select-plural-fonts-one-for-roman-and-another-for-italic-in-atom/20611)
* [@font-face - CSS | MDN](http://developer.mozilla.org/en-US/docs/Web/CSS/@font-face)

---