クリスのコーナー：Monaspace – Codepen

私は新しいコーディングフォントの吸盤です。私は通常、あなたが使用するコーディングフォントが生産性に大きな影響を与えるとは思わないので（気を散らしていない限り）、おならをして切り替えるのは楽しいことです。部屋の家具を押しのけたり、別の自転車ルートをとって仕事をしています。

だから私を数えてください で Githubの新しいモノスペースコーディングフォントのセットで遊ぶため： モナスパース。

（言及せずに遠くに行く前に、あなたはあなたの訪問だけでCodePenでそれらを使用できます エディター設定 そして1つを選んでください。）

5つの異なる様式化されたバージョンだけが存在するという事実は、かなり価値のあるメモですが、かなりクールな他のさまざまな機能があります。 テクスチャヒーリング 構成された用語のように感じますが、それがすることは理解するのが非常に簡単で、はっきりと便利です。

基本的には、ワイドレターは自分自身を削る必要がなく、狭い文字は自分自身を誇張する必要はありません。彼らは言う：

テクスチャヒーリングは、より多くのスペースが必要であり、多すぎる隣接する文字の各ペアを見つけることで機能します。狭いキャラクターは、白人の一部を譲るものと交換され、より広い文字は、箱の端まで伸びるものと交換されます。

これは、OpenType機能「コンテキスト代替」で行われます。それは、特定のキャラクターの組み合わせが一緒に最適に機能する新しいグリフにフロップして、わずかに異なります。

モナスパースにも結晶があります。合字は、フォントのコーディングではかなり物議を醸しています。たとえば、一部の人々は本当にそれを嫌っています != に変わるかもしれません ≠ それはあなたが書いているかもしれない言語の文字通りの構文からの逸脱のような結晶として。彼らは私のお気に入りではありませんが、それはしっかりと保持されている意見ではなく、それらを使用しないだけで簡単です。 （CodePenでは、一部の初心者にとっては混乱しているように見えるため、有効になっていません。）

それらは可変フォントとして来ます。これは、可変フォントがルールするため、私が気に入っています。そして、それは1つのわずかな軸を持つ可変フォントに電話されたものではなく、重量です、 そして 幅、 そして スラント、それは素晴らしいです。

ダウンロードには、可変バージョンと非変動バージョンの両方が付属しています。可変性を使用する予定がない場合、可変フォントは桁違いに大きいため、おそらく変数バージョンを使用してください。ウェブ上にない場合、おそらく問題ではありません。また、彼らは出荷しただけです .woff そしてそうではありません .woff2？

彼らがこの「スーパーファミリー」の周りに持っている私の非常に好きなアイデアは、同じUIでさまざまな理由でそれらを混合して一致させるというアイデアです。

斜体の単階建てを持つという考えは、ますます一般的になり始めています。 OGを叫ぶ必要があります オペレーター その地面を壊すために。斜体でコメントを設定することは、私にとって非常にクールなアイデアです。今、私たちはそのためにラドンを使用することができました。上の画像では、XenonとGithub Copilotを使用してKryptonを使用したJSDOCスタイルのコメントを提案しています。大好きです。それを出荷します。 （しかし、VSコードではまだ可能だとは思いませんが、Microsoftが両方を作ることを考慮すると、それが来ると思います。）

それを可能にするには、基本的に、コードのさまざまな側面を簡単に識別できるトークン/クラスを提供するための構文強調表示ツールが必要です。それは確かに可能であり、おそらくそれほど難しいことではありませんが、おそらく非常に多くのサードパーティのテーマで展開するのはややトリッキーなことです。

とにかく、これはどれほど素晴らしいですか？

さまざまなコーディングフォントで再生されている場合は、Codepenに20を超えるものがあるという事実を確認してください。しかし、もちろん、野生にはそれ以上のものがあります。 「遊び心と楽しい」コーディングフォントの風景についての素晴らしい読み物は ダグ・ウィルソンのキャラクターのコーディング。 Doug Dug（ha）IBMの「Selectric」タイプのサンプルのこの素晴らしい例（文字通り異なるタイプライターフォントは、タイプライターの金属ボールを交換することで交換できます）：

とてもかっこいい！この新しいコーディングフォントの波は、誰もがそれを認識しているかどうかにかかわらず、ここで起こっていることへのコールバックのようなものであることが大好きです。ダグが最初に言及しているのは、私が使用したオペレーターです 年と年 それが出てきて、まだ愛している後。 2番目はコミックコードです：

私の最初の考え：これは冗談でなければなりませんよね？！コミックサン 評判が悪い そして、コーディングに使用することを意図したことはありませんでしたが、どうすれば…？それが狂った首謀者のトシ・オマガリが尋ねたように思われたことです。

彼は言う、「コミックコード 最も過剰に嫌われている書体のモノスパースの適応です。」私は尋ねたことはありませんが、彼の思考プロセスは次のようだったと感じています このGIF。

信じられないかもしれません、 私はそれが実際に機能すると思います そして確かにあなたの顔に笑顔、または少なくともにやにや笑いをもたらします

完全に同意します！それは動作します！

私がコードベースにいる間、モナスパースフォントを入れている間、もちろん、一般的なコードのクリーンアップを行うことに抵抗することはできませんでした。 Monaspaceは発送のみをフォントします .woff、だから @font-face CSSでは、次のように簡単です。

@font-face {
  font-family: 'Font Name';
  src: url('./fonts/font.woff') format('woff');
}

あなたは逃げることができます のみ 最近のWoff2での出荷なので、その形式を持っているフォントのいくつかは、まさに私がやっていることです。これは、以前は大量のフォーマットを備えた過去にこのような複雑なコードであったため、そこでのシンプルさは素晴らしいと感じています。

それから私は最近学びました Ollie Williamsのブログ投稿から フォーマットを文字列としてもう配置する必要がないこと、キーワードは動作します。

@font-face {
  font-family: 'Font Name';
  src: url('./fonts/font.woff2') format(woff2);
}

それらのささいなことを感謝しなければなりません😍。他のクリーンアップについてはOllieの投稿をご覧ください @font-face 変数フォント、カラーフォント、その他のフォント「Tech」の指定方法を含みます。