coding fonts

フォントのコーディング

コードを作成するために設計されたフォントを表示するマイクロサイト。

https://coding-fonts.css-tricks.com/

このサイトを実行します。

• 依存関係のインストール： npm install
• サーバーを開始： npm run dev

フォントを追加します

• サーバーを開始します（上記を参照）
• フォントがオープンソースの場合は、フォントのコピーをfontsフォルダーに入れます。少なくとも、フォント名のフォルダーにある.woff2ファイル。 EG /src/assets/fonts/NewFont/NewFont.woff2
• そのフォントをそのフォントフォルダーで使用できるようにするスタイルシートを作成します。 EG /src/assets/fonts/NewFont/NewFont.css
• new-font.md to /src/fontsなどのファイルを追加します。フォントの情報を追加します。 /src/assets/fonts/に比べて、 stylesheet_urlフィールドの前のステップのStyleSheetのURLをマークします。 URLが絶対的な場合、つまりリポジトリに追加されていない場合は、 stylesheet_absolute: trueフィールドを追加します。例としてこれをご覧ください。
• プレビューするために、スクリーンショットとなるものは、URL構造のようなものです。http：// localhost：8080/code_samples/html/？font = anonymous-pro＆thema = darkフォントは、作成したマークダウンファイルのケバブケースTitleと一致します。
• スクリーンショットを撮りましょう！これはローカルのみのプロセスです。コマンドラインのスクリーンショットの指示に従ってください。
• それをプルリクエストします。 PRの一部として、Netlifyのビルドプレビューを表示できるはずです。

スクリーンショットを撮る

含まれているtakeScreenshots.jsファイルを使用してスクリーンショットを撮影できます。オプションは、以下のヘルプ画面にリストされています。

 Options:
  --version    Show version number
  -f, --font   Font to use for screenshots
  -l, --lang   Code sample to use for screenshot
  -t, --theme  Theme to use for screenshots
  --parallel   Run the screenshots in parallel
  -h, --help   Show help

--font 、 --lang 、および--themeはすべて、すべてのデータポイントのスクリーンショットを撮影することを処理するための「すべて」キーワードを受け入れます。

--parallelフラグは、操り人形師を並行して実行できます。これは、フォントのスクリーンショットを繰り返し撮影する必要がある場合に役立ちます。これにより、要求する合計順列があるのと同じくらい多くの操り人形師インスタンスが生じることに注意してください。たとえば、次のコマンドをご覧ください。

 node takeScreenshots.js -f source-code-pro -l all -t all

スクリーンショットを撮るために、一度に8つのPuppeteerインスタンス（1つのフォント * 4言語 * 2テーマ= 8インスタンス）が生成されます。これは通常問題であり、問題は発生しませんが、すべてのフォントに対してこれを行う場合は、ほとんど常に障害に陥る数百のインスタンスを生み出すことになります。

追加の例

 # Take a screenshot of the Source Code Pro font, using the JavaScript code sample, and the dark theme.
node takeScreenshots.js -f source-code-pro -l js -t dark

# Take a screenshot of the Menlo font, using all of the code samples, and the light theme.
node takeScreenshots.js -f menlo -l all -t light

# Take a screenshot of all of the fonts, using all of the code samples, and all of the themes.
node takeScreenshots.js -f all -l all -t all

# Take a screenshot of the Input font, using all of the code samples, all of the themes, and do so in parallel
node takeScreenshots.js -f input -l all -t all --parallel