반응형
시스템에 설치된 폰트 목록을 확인
시스템에 설치된 폰트 목록을 확인하는 방법은 운영체제에 따라 다릅니다. 아래는 주요 운영체제에서 시스템에 설치된 폰트 목록을 확인하는 방법입니다.
Windows
- 제어판을 통해 확인
제어판>모양 및 개인 설정>글꼴을 클릭합니다.- 설치된 폰트 목록이 나타납니다.
- 파일 탐색기를 통해 확인
파일 탐색기를 열고 주소 창에C:\Windows\Fonts를 입력합니다.- 설치된 폰트 목록이 표시됩니다.
macOS
- Font Book(서체 관리자) 앱을 통해 확인
응용 프로그램폴더에서서체 관리자(Font Book)를 엽니다.- 설치된 폰트 목록이 나타납니다.
- 터미널 명령어를 통해 확인
- 터미널을 열고 다음 명령어를 입력합니다:
system_profiler SPFontsDataType- 설치된 폰트 목록이 터미널에 출력됩니다.
Linux
- 터미널 명령어를 통해 확인
- 터미널을 열고 다음 명령어를 입력합니다:
fc-list - 설치된 폰트 목록이 터미널에 출력됩니다.
- 터미널을 열고 다음 명령어를 입력합니다:
웹 브라우저를 통한 확인
웹 브라우저에서 JavaScript를 사용하여 시스템에 설치된 폰트 목록을 확인하는 것은 직접적으로 불가능합니다. 그러나 다음과 같은 방법으로 사용 가능한 웹 폰트를 확인할 수 있습니다:
- 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 폰트를 사용하도록 설정했습니다.
반응형
'도서로 공부하는 프로그래밍 > 코딩 자율학습' 카테고리의 다른 글
| [프로세싱] 프로세싱 개요 (7) | 2024.09.17 |
|---|---|
| 소프트웨어 컨테이너화 플랫폼, Docker (34) | 2024.07.25 |
| 안드로이드폰 '맨발路' 스토리보드 (32) | 2024.07.22 |
| 웹 개발에서 스토리보드란? (33) | 2024.07.21 |
| '맨발路' 지도 제작 플랫폼 기획 (33) | 2024.07.20 |
