자바스크립트 "Local Font Access API"

Local Font Access API는 웹 개발자가 웹 페이지 내에서 직접 사용자의 컴퓨터 또는 장치에 설치된 글꼴에 액세스하고 사용할 수 있도록 하는 JavaScript 인터페이스입니다. 이 API는 Google Chrome, Firefox 및 Microsoft Edge와 같은 최신 웹 브라우저에서 지원됩니다.

​

Local Font Access API를 사용하여 웹 개발자는 사용자 시스템에 고유한 글꼴을 사용하여 보다 개인화되고 시각적으로 매력적인 웹 페이지를 만들 수 있습니다. 예를 들어, 웹 페이지는 사용자 컴퓨터에 설치된 사용자 지정 글꼴을 사용하여 인쇄된 브로셔 또는 기타 마케팅 자료의 타이포그래피와 일치시킬 수 있습니다.

​

다음은 Local Font Access API를 사용하여 글꼴을 로드하는 방법의 예입니다.

​

// Load a font file

async function loadFont() {

const fontFile = new File([""], "custom-font.ttf", {type: "font/ttf"});

await document.fonts.load(`url(${URL.createObjectURL(fontFile)})`, "My Custom Font");

 

// Use the custom font

const customFontDiv = document.createElement("div");

customFontDiv.style.fontFamily = "My Custom Font";

customFontDiv.textContent = "Hello, World!";

document.body.appendChild(customFontDiv);

}

​

loadFont();

​

이 예제에서 `loadFont()` 함수는 글꼴 파일을 나타내는 새 `File` 객체를 만듭니다. 그러면 `document.fonts.load()` 메서드가 호출되어 글꼴 파일을 로드하고 나중에 참조하는 데 사용할 수 있는 이름(`"My Custom Font"`)을 지정합니다. 마지막으로 새 `div` 요소가 생성되고 사용자 지정 글꼴을 사용하도록 스타일이 지정되며 해당 요소가 문서에 추가됩니다.

​

`load()` 메서드는 Promise를 반환하므로 로드된 글꼴을 사용하기 전에 대기해야 합니다. 또한 모든 글꼴 형식이 모든 브라우저에서 지원되는 것은 아니므로 다양한 브라우저에서 코드를 테스트하여 예상대로 작동하는지 확인하는 것이 중요합니다.

​

맞춤 글꼴을 적용하기 위해 CSS를 사용하는 또 다른 예:

​

// Load a font file

async function loadFont() {

const fontFile = new File([""], "custom-font.ttf", {type: "font/ttf"});

await document.fonts.load(`url(${URL.createObjectURL(fontFile)})`, "My Custom Font");

 

// Apply custom font using CSS

const style = document.createElement("style");

style.textContent = `

@font-face {

font-family: "My Custom Font";

src: url(${URL.createObjectURL(fontFile)});

}

body {

font-family: "My Custom Font";

}

`;

document.head.appendChild(style);

}

​

loadFont();

​

이 예제에서는 글꼴 파일이 로드된 후 새 `style` 요소가 생성되고 해당 `textContent`는 사용자 지정 글꼴을 정의하는 `@font-face` 규칙과 사용자 지정 글꼴을 `body` 요소에 적용하는 CSS 규칙을 포함하도록 설정됩니다. 그러면 `style` 요소가 문서의 헤드 요소에 추가됩니다.

​

다시 말하지만, 웹에서 사용자 지정 글꼴을 사용하는 데 따른 잠재적인 제한과 불일치를 인식하고 다양한 브라우저와 장치에서 코드를 테스트하여 예상대로 작동하는지 확인하십시오.