coding fonts

코딩 글꼴

코드를 작성하도록 설계된 글꼴을 보여주는 마이크로 사이트.

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

이 사이트를 실행합니다.

• 종속성 설치 : npm install
• 시작 서버 : npm run dev

글꼴 추가

• 서버 시작 (위 참조)
• 글꼴이 오픈 소스 인 경우 fonts 폴더에 글꼴 사본을 넣으십시오. 최소한 .woff2 파일에서는 글꼴 이름의 폴더입니다. 예 : /src/assets/fonts/NewFont/NewFont.woff2
• 글꼴 폴더에서 사용할 글꼴을 사용할 수있는 스타일 시트를 만드십시오. 예 : /src/assets/fonts/NewFont/NewFont.css
• /src/fonts 에 new-font.md 와 같은 파일을 추가하십시오. 글꼴의 정보를 추가하십시오. /src/assets/fonts/ 에 대한 stylesheet_url 필드의 이전 단계에서 스타일 시트의 URL을 표시하십시오. URL이 절대적이면 Repo에 추가되지 않으면 stylesheet_absolute: true Field를 추가하십시오. 이것을 예로보십시오.
• 스크린 샷이 무엇인지 미리 보려면 URL 구조는 다음과 같습니다. http : // localhost : 8080/code_samples/html/? font = 익명 프로 및 테마 = 어두운 곳에서 글꼴이 생성 한 Markdown 파일의 케밥 케이스 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 는 모두 각각의 데이터 포인트의 스크린 샷을 처리하기 위해 'All'키워드를 수락합니다.

--parallel 플래그를 사용하면 Puppeteer를 동시에 실행할 수 있습니다. 이는 글꼴의 스크린 샷을 반복적으로 가져 가야하는 경우 유용합니다. 요청한 총 순열이있는 경우 많은 인형극 인스턴스가 발생합니다. 예를 들어 다음 명령을 사용하십시오.

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

스크린 샷을 찍기 위해 8 개의 인형 인스턴스 (1 font * 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