<p>突然ですが、皆さんはどのフォントでコーディングしていますか?<br>
monaco、Monospace、MSゴシックなど、等幅フォントを軸に種類は多種多様です<br>
そんな中、それらを尻目に私が使っているフォントはIosevkaというフォントです</p>
<h1 id="iosevka%E3%81%A8%E3%81%AF%3F">
<a class="header-anchor-link" href="#iosevka%E3%81%A8%E3%81%AF%3F" aria-hidden="true"></a> Iosevkaとは?</h1>
<p>以下の特徴を持ったフォントです</p>
<ul>
<li>等幅フォント</li>
<li>日本特有の文字種(㈱や㌕など)に対応
<ul>
<li>これらもきっちりと等幅を守っている</li>
</ul>
</li>
<li>リガチャ機能あり
<ul>
<li>
<code>!=</code>や<code>&lt;=</code>など、特定の連続した文字列を合成して別の文字で表す機能</li>
<li>エディタもリガチャに対応している必要あり(VSCodeやAtom、iTerm2は対応しているので、大抵のエディタやIDEは対応していると思います)</li>
</ul>
</li>
<li>特定の文字をプリセットの中から選ぶ事ができる
<ul>
<li>プリセットから選んで、特定の文字のみデザインを変更することも可能</li>
</ul>
</li>
<li>全体的な文字の太さ、デザイン、文字のゆとりも設定することが可能</li>
</ul>
<p>特に</p>
<blockquote>
<p>特定の文字をプリセットの中から選ぶ事ができる<br>
全体的な文字の太さ、文字のゆとりも設定することが可能</p>
</blockquote>
<p>が個人的に目玉です<br>
他のフォントでは見たことないレベルで、カスタマイズが可能です<br>
これだけでは「はい・・・?」と想像しづらい(できない)と思われるので、詳細を説明していきます</p>
<h1 id="%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88">
<a class="header-anchor-link" href="#%E5%85%AC%E5%BC%8F%E3%82%B5%E3%82%A4%E3%83%88" aria-hidden="true"></a> 公式サイト</h1>
<p>こちらになります</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__86c8346eea3c3" src="https://embed.zenn.studio/card#zenn-embedded__86c8346eea3c3" data-content="https%3A%2F%2Ftypeof.net%2FIosevka%2F" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://typeof.net/Iosevka/" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://typeof.net/Iosevka/</a></p>
<p>一番見てもらいたいところは</p>
<blockquote>
<p>Variants à la Carte</p>
</blockquote>
<p>の部分です</p>
<p><img src="https://i.gyazo.com/05cbd9e3aca561d3c7a9a185ddd664af.gif" alt loading="lazy" class="md-img"></p>
<p>この通り、58文字を自分の好きなデザインに変えられることができます<br>
他にも</p>
<ul>
<li>サンセリフ調にするか否か</li>
<li>文字の太さの調整</li>
<li>リガチャのプリセット設定
<ul>
<li>リガチャ自体を無効にすることも可能</li>
<li>文字の様に文字単位でのリガチャの無効やデザイン変更はできない</li>
</ul>
</li>
</ul>
<p>という様に、自分が違和感なく使えるフォントを徹底的に設定することができます</p>
<h1 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E5%85%A5%E6%89%8B%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%AE%E5%85%A5%E6%89%8B%E6%96%B9%E6%B3%95" aria-hidden="true"></a> フォントの入手方法</h1>
<p>大きく分けて2つあります<br>
「GitHubのReleaseページからフォントをダウンロード」と、「GitHubからソースをクローンしてビルド」になります</p>
<h2 id="github%E3%81%AErelease%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89">
<a class="header-anchor-link" href="#github%E3%81%AErelease%E3%83%9A%E3%83%BC%E3%82%B8%E3%81%8B%E3%82%89%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%83%80%E3%82%A6%E3%83%B3%E3%83%AD%E3%83%BC%E3%83%89" aria-hidden="true"></a> GitHubのReleaseページからフォントをダウンロード</h2>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>この方法では、文字ごとのカスタマイズなどはできません</p>
</div></aside>
<p>公式サイトにあるStylistic Setsなどのプリセットで十分という方は、以下のページからフォントをダウンロードすることができます</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0d23092b0937e" src="https://embed.zenn.studio/card#zenn-embedded__0d23092b0937e" data-content="https%3A%2F%2Fgithub.com%2Fbe5invis%2FIosevka%2Freleases" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/be5invis/Iosevka/releases" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/be5invis/Iosevka/releases</a></p>
<h2 id="github%E3%81%8B%E3%82%89%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%97%E3%81%A6%E3%83%93%E3%83%AB%E3%83%89">
<a class="header-anchor-link" href="#github%E3%81%8B%E3%82%89%E3%82%BD%E3%83%BC%E3%82%B9%E3%82%92%E3%82%AF%E3%83%AD%E3%83%BC%E3%83%B3%E3%81%97%E3%81%A6%E3%83%93%E3%83%AB%E3%83%89" aria-hidden="true"></a> GitHubからソースをクローンしてビルド</h2>
<p>以下のリポジトリをクローンして、ビルドを行うと、フォントがジェネレートされます</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__d45b70bf60101" src="https://embed.zenn.studio/card#zenn-embedded__d45b70bf60101" data-content="https%3A%2F%2Fgithub.com%2Fbe5invis%2FIosevka" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/be5invis/Iosevka" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/be5invis/Iosevka</a></p>
<p>GitHubにも、ビルドする手順が掲載されているので、一読すると良いです</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0d62afa835756" src="https://embed.zenn.studio/card#zenn-embedded__0d62afa835756" data-content="https%3A%2F%2Fgithub.com%2Fbe5invis%2FIosevka%23building-from-source" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/be5invis/Iosevka#building-from-source" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/be5invis/Iosevka#building-from-source</a></p>
<h3 id="%E3%83%93%E3%83%AB%E3%83%89%E3%82%92%E8%A9%A6%E3%81%99">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%AB%E3%83%89%E3%82%92%E8%A9%A6%E3%81%99" aria-hidden="true"></a> ビルドを試す</h3>
<p>まずは、ビルドが正常に動作するか確認します</p>
<h4 id="%E5%BF%85%E9%A0%88%E7%92%B0%E5%A2%83">
<a class="header-anchor-link" href="#%E5%BF%85%E9%A0%88%E7%92%B0%E5%A2%83" aria-hidden="true"></a> 必須環境</h4>
<p>ビルドをするには、以下の環境が必要になります</p>
<ul>
<li>Node.js(12.16.0以上のバージョン)</li>
<li>
<code>ttfautohint</code>のインストール(<code>npm i ttfautohint</code>でOK)</li>
</ul>
<h4 id="%E3%83%93%E3%83%AB%E3%83%89%E6%96%B9%E6%B3%95">
<a class="header-anchor-link" href="#%E3%83%93%E3%83%AB%E3%83%89%E6%96%B9%E6%B3%95" aria-hidden="true"></a> ビルド方法</h4>
<aside class="msg message"><span class="msg-symbol">!</span><div class="msg-content">
<p>負荷のかかる処理なので、別作業をしながらビルドすると、結構カクつきます<br>
しばらく放置することになると思います</p>
</div></aside>
<p>以下のコマンドを実行するだけです</p>
<div class="code-block-container"><pre class="language-shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span>
<span class="token function">npm</span> run build -- contents::iosevka
</code></pre></div><p>正常に完了すれば、<code>dist/</code>内にフォントがあると思います</p>
<h3 id="%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B">
<a class="header-anchor-link" href="#%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%82%92%E3%82%AB%E3%82%B9%E3%82%BF%E3%83%9E%E3%82%A4%E3%82%BA%E3%81%99%E3%82%8B" aria-hidden="true"></a> フォントをカスタマイズする</h3>
<p><strong>2020/12/10追記</strong></p>
<p>以下のサイトで、ベース、文字、リガチャを画面上でデザインを確認しながら、ページの末尾に<code>private-build-plans.toml</code>と実行すべきコマンドが末尾に表示されます</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__a1ca76f1e78af" src="https://embed.zenn.studio/card#zenn-embedded__a1ca76f1e78af" data-content="https%3A%2F%2Ftypeof.net%2FIosevka%2Fcustomizer" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://typeof.net/Iosevka/customizer" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://typeof.net/Iosevka/customizer</a></p>
<p>自分で好きな様に設定したら、<code>private-build-plans.sample.toml</code>と同じ階層に<code>private-build-plans.toml</code>を作成して、サイト上で自動的に作成されたコードをコピペします<br>
コマンドも自動的に生成されているので、そのコマンドを実行すれば、フォントが生成されます<br>
正常に終了したら、<code>[buildPlans.iosevka-custom]</code>の<code>family</code>に設定したフォント名のファイルができていると思います</p>
<h4 id="%E8%A9%B3%E7%B4%B0%E3%81%AA%E8%A8%AD%E5%AE%9A%E9%A0%85%E7%9B%AE%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6">
<a class="header-anchor-link" href="#%E8%A9%B3%E7%B4%B0%E3%81%AA%E8%A8%AD%E5%AE%9A%E9%A0%85%E7%9B%AE%E3%81%AB%E3%81%A4%E3%81%84%E3%81%A6" aria-hidden="true"></a> 詳細な設定項目について</h4>
<p>各設定項目と、設定できる値については、以下を参考にしてください</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__0b82f74e54f0d" src="https://embed.zenn.studio/card#zenn-embedded__0b82f74e54f0d" data-content="https%3A%2F%2Fgithub.com%2Fbe5invis%2FIosevka%23configuring-custom-build" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/be5invis/Iosevka#configuring-custom-build" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/be5invis/Iosevka#configuring-custom-build</a></p>
<p>前述の自動生成サイトでほぼできるはずなので、とても細かい設定をしない限り、見る必要はそんなにないと思っています</p>
<h1 id="%E6%9C%80%E5%BE%8C%E3%81%AB">
<a class="header-anchor-link" href="#%E6%9C%80%E5%BE%8C%E3%81%AB" aria-hidden="true"></a> 最後に</h1>
<p>中国語、日本語は更紗ゴシックと言うフォントがあります</p>
<p><span class="embed-block zenn-embedded zenn-embedded-card"><iframe id="zenn-embedded__3c40512c110b6" src="https://embed.zenn.studio/card#zenn-embedded__3c40512c110b6" data-content="https%3A%2F%2Fgithub.com%2Fbe5invis%2FSarasa-Gothic" frameborder="0" scrolling="no" loading="lazy"></iframe></span><a href="https://github.com/be5invis/Sarasa-Gothic" style="display:none" target="_blank" rel="nofollow noopener noreferrer">https://github.com/be5invis/Sarasa-Gothic</a></p>
<p>Iosevkaと源ノ角ゴシックをベースに指定しているみたいですが、カスタマイズはできなさそう?(やったことないので、憶測になります)</p>


Iosevkaというフォントが良い

GitHubのReleaseページからフォントをダウンロード

GitHubからソースをクローンしてビルド

catnose

ルナ・チェバリー

<p>Iosevka知りませんでした。コード用フォントにとても良さそう。とても参考になる情報ありがとうございます。</p>


<p>コード用フォントとして、かなり重宝しています<br>
好みの問題もあるので記事には書けてないのですが、小文字のエル<code>l</code>、大文字のアイ<code>I</code>、パイプ<code>|</code>など、似た形のフォントも明確に判別できる様(かつ自分が好きな形)に設定できるのもgoodです</p>


<p>それめちゃくちゃ良いですね……<br>
教えていただき、ありがとうございます。</p>


Discussion