coding fonts

編碼字體

一個微型材料，展示了為編寫代碼設計的字體。

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

運行此網站。

• 安裝依賴項： npm install
• 啟動服務器： npm run dev

添加字體

• 啟動服務器（請參見上文）
• 如果字體是開源的，請將字體的副本放入fonts文件夾中。在字體名稱的文件夾中，至少有一個.woff2文件。例如，eg/src/assets/fonts/newfont/ /src/assets/fonts/NewFont/NewFont.woff2
• 製作一個樣式表，可以在該字體文件夾中使用該字體。例如，eg /src/assets/fonts/NewFont/NewFont.css /fonts/newfont/newfont.css
• 將諸如new-font.md之類的文件添加到/src/fonts 。添加字體的信息。相對於/src/assets/fonts/ ，從上一個步驟中標記stylesheet_url表的URL。如果URL是絕對的，則IE未添加到存儲庫中，請添加stylesheet_absolute: true字段。將此視為一個例子。
• 為了預覽屏幕截圖，URL結構是：http：// localhost：8080/code_samples/html/？ font =匿名pro＆theme = dark font匹配您創建的標記文件的kebab-case Title 。
• 屏幕截圖！這是一個僅本地過程。按照命令行中的屏幕截圖說明進行操作。
• 提出拉動請求。您應該能夠將Netlify上的內置預覽視為PR的一部分。

拍攝屏幕截圖

您可以使用隨附的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 Flag允許並行運行Puppeteer，如果您需要重複拍攝字體的屏幕截圖，這很有用。請注意，這將產生與您要求的總排列一樣多的木偶實例。以以下命令為例。

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

它將出現8個木偶儀實例（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