아름다운 전진

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` 요소가 문서의 헤드 요소에 추가됩니다.

​

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

Web Crypto API는 웹 개발자에게 암호화 기능을 제공하는 JavaScript 인터페이스입니다. 이를 통해 개발자는 암호화, 암호 해독, 해싱, 서명 및 디지털 서명 확인과 같은 다양한 암호화 작업을 수행할 수 있습니다. 이러한 작업은 안전하고 효율적인 방식으로 수행될 수 있으므로 개발자가 보안 웹 애플리케이션을 보다 쉽게 구현할 수 있습니다.

​

다음은 JavaScript에서 Web Crypto API를 사용하는 방법에 대한 몇 가지 예입니다.

​

난수 생성:

​

window.crypto.getRandomValues(new Uint32Array(1))[0]

​

이 코드는 Web Crypto API를 사용하여 임의의 32비트 부호 없는 정수를 생성합니다.

​

메시지 해싱:

​

async function hashMessage(message) {

const encoder = new TextEncoder();

const data = encoder.encode(message);

const hash = await crypto.subtle.digest('SHA-256', data);

return hash;

}

​

hashMessage('hello world')

.then(hash => console.log(new Uint8Array(hash)))

.catch(error => console.error(error));

​

이 코드는 SHA-256 알고리즘을 사용하여 "hello world" 메시지를 해시합니다. `TextEncoder` 인터페이스를 사용하여 메시지를 `ArrayBuffer`로 변환하고 `crypto.subtle.digest` 메서드를 사용하여 해시를 생성합니다.

​

키 쌍 생성:

​

async function generateKeyPair() {

const algorithm = { name: 'RSA-OAEP', modulusLength: 2048, publicExponent: new Uint8Array([0x01, 0x00, 0x01]), hash: 'SHA-256' };

const keys = await crypto.subtle.generateKey(algorithm, true, ['encrypt', 'decrypt']);

return keys;

}

​

generateKeyPair()

.then(keys => console.log(keys))

.catch(error => console.error(error));

​

이 코드는 모듈러스 길이가 2048비트이고 공개 지수가 65537(0x010001)이고 OAEP 패딩 체계를 사용하는 RSA 키 쌍을 생성합니다. `crypto.subtle.generateKey` 메서드를 사용하여 키 쌍을 생성하고 키를 반환합니다.

​

데이터 암호화 및 해독:

​

async function encryptData(data, publicKey) {

const encryptedData = await crypto.subtle.encrypt({ name: 'RSA-OAEP' }, publicKey, data);

return encryptedData;

}

​

async function decryptData(encryptedData, privateKey) {

const decryptedData = await crypto.subtle.decrypt({ name: 'RSA-OAEP' }, privateKey, encryptedData);

return decryptedData;

}

​

const message = 'hello world';

const encoder = new TextEncoder();

const data = encoder.encode(message);

​

generateKeyPair()

.then(keys => {

const publicKey = keys.publicKey;

const privateKey = keys.privateKey;

return encryptData(data, publicKey)

.then(encryptedData => decryptData(encryptedData, privateKey))

.then(decryptedData => {

const decoder = new TextDecoder();

const decryptedMessage = decoder.decode(decryptedData);

console.log(decryptedMessage);

});

})

.catch(error => console.error(error));

​

이 코드는 RSA 키 쌍을 생성하고 공개 키를 사용하여 "hello world" 메시지를 암호화한 다음 개인 키를 사용하여 암호화된 데이터를 복호화합니다. `crypto.subtle.encrypt` 및 `crypto.subtle.decrypt` 메서드를 사용하여 암호화 및 암호 해독 작업을 수행합니다.

​

이는 JavaScript에서 Web Crypto API를 사용하는 방법에 대한 몇 가지 예일 뿐입니다. API는 다양한 암호화 작업을 수행하기 위한 더 많은 기능과 알고리즘을 제공합니다.