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