도서로 공부하는 프로그래밍/코딩 자율학습

시스템에 설치된 폰트 목록을 확인

열공노년 2024. 7. 23. 04:05
반응형

시스템에 설치된 폰트 목록을 확인

시스템에 설치된 폰트 목록을 확인하는 방법은 운영체제에 따라 다릅니다. 아래는 주요 운영체제에서 시스템에 설치된 폰트 목록을 확인하는 방법입니다.

Windows

  1. 제어판을 통해 확인
    • 제어판 > 모양 및 개인 설정 > 글꼴을 클릭합니다.
    • 설치된 폰트 목록이 나타납니다.
  2. 파일 탐색기를 통해 확인
    • 파일 탐색기를 열고 주소 창에 C:\Windows\Fonts를 입력합니다.
    • 설치된 폰트 목록이 표시됩니다.

제어판의 모양 및 개인 설정
'모양 및 개인 설정'의 '글꼴'

macOS

  1. Font Book(서체 관리자) 앱을 통해 확인
    • 응용 프로그램 폴더에서 서체 관리자(Font Book)를 엽니다.
    • 설치된 폰트 목록이 나타납니다.
  2. 터미널 명령어를 통해 확인
    • 터미널을 열고 다음 명령어를 입력합니다: 
    • system_profiler SPFontsDataType
    • 설치된 폰트 목록이 터미널에 출력됩니다.

Linux

  1. 터미널 명령어를 통해 확인
    • 터미널을 열고 다음 명령어를 입력합니다: 
      fc-list
    • 설치된 폰트 목록이 터미널에 출력됩니다.

웹 브라우저를 통한 확인

웹 브라우저에서 JavaScript를 사용하여 시스템에 설치된 폰트 목록을 확인하는 것은 직접적으로 불가능합니다. 그러나 다음과 같은 방법으로 사용 가능한 웹 폰트를 확인할 수 있습니다:

  1. Google Fonts 등 웹 폰트 서비스 이용
    • Google Fonts에서 제공하는 폰트를 사용할 수 있습니다.
    • 선택한 폰트를 HTML 코드에 포함하여 사용할 수 있습니다.

폰트 사용 예제 (HTML 및 CSS)

설치된 폰트를 사용하여 HTML 문서에 적용하려면 다음과 같이 font-family 속성을 사용합니다:

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>맨발路 로고</title>
  <style>
    body {
      font-family: 'Nanum Gothic', Arial, sans-serif;
    }
  </style>
</head>
<body>
  <svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
    <g>
      <!-- 왼쪽 대각선 선 -->
      <line x1="50" y1="150" x2="100" y2="50" stroke="#d2691e" stroke-width="4"/>
      <!-- 오른쪽 수평 선 -->
      <line x1="100" y1="50" x2="150" y2="50" stroke="#d2691e" stroke-width="4"/>
      <!-- 아래쪽 수평 선 -->
      <line x1="50" y1="150" x2="150" y2="150" stroke="#d2691e" stroke-width="4"/>
      <!-- 텍스트 -->
      <text x="85" y="120" font-family="'Nanum Gothic', Arial, sans-serif" font-size="20" fill="black">맨발路</text>
    </g>
  </svg>
</body>
</html>

 

이 예제에서는 'Nanum Gothic' 폰트를 우선적으로 사용하고, 시스템에 해당 폰트가 없는 경우 Arial 폰트, 마지막으로 sans-serif 폰트를 사용하도록 설정했습니다.

반응형