내가 겪었던 이슈
canvas를 하나의 image로 만드는 기능을 구현중에 추가한 text가 글꼴이 제대로 load되지 않은 상태로 image로 되는 문제가 있었다.
화면에 렌더링된 canvas를 image로 만드는게 아니라 특정 데이터만 주어지고 그것을 메모리에서 canvas에 추가한 다음 image로 만드는 것이어서 글꼴이 제대로 적용되지 않는듯 했다.
내가 만들어야하는 결과 이미지가 왼쪽인데 실제로 만들어진 결과물은 오른쪽의 빨간색으로 줄쳐진 부분처럼 글꼴이 부분적으로 적용되었다.
어떻게 해결할지 찾다가 FontFaceSet의 check와 load 메서드를 알게 되었고 문제를 해결할 수 있었다.
주의점
codepen으로 좀 더 쉽게 확인할 수 있도록 링크를 추가하고 싶었는데
codepen에서 코드가 실행되는 환경 때문인지 내가 설정을 잘못한것인지는 모르겠지만
내가 의도한 방식대로 코드가 실행되지 않아서 gif을 추가했다.
gif을 크게 보고싶으면 마우스 우클릭 -> 새 탭에서 이미지 클릭 으로 확인하는것을 추천함!
FontFaceSet의 check 메서드
글꼴이 로드되었는지 확인할 수 있다. 글꼴 전체가 아닌 특정 text가 로드되었는지도 확인할 수 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@font-face {
font-family: "PyeongChangPeace-Bold";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2")
format("woff2");
font-weight: 700;
font-style: normal;
}
div {
font-family: "PyeongChangPeace-Bold";
font-size: large;
}
</style>
</head>
<body>
<div>평창평화체</div>
<script>
const interval = setInterval(() => {
const textLoaded = document.fonts.check("12px PyeongChangPeace-Bold");
// 글꼴이 로드되지 않음
if (!textLoaded) {
console.log("PyeongChangPeace-Bold 글꼴 로드 X");
}
// 글꼴이 로드됨
else {
console.log("PyeongChangPeace-Bold 글꼴 로드 O");
clearInterval(interval);
}
}, 500);
</script>
</body>
</html>
참고 : mdn 문서 : FontFaceSet.check()
FontFaceSet의 load 메서드
load 메서드는 매개변수로 주어진 글꼴을 강제로 로드시킨다.
특정 문자열을 먼저 강제로 로드시킬수도 있다.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
@font-face {
font-family: "PyeongChangPeace-Bold";
src: url("https://fastly.jsdelivr.net/gh/projectnoonnu/noonfonts_2206-02@1.0/PyeongChangPeace-Bold.woff2")
format("woff2");
font-weight: 700;
font-style: normal;
}
div {
font-family: "PyeongChangPeace-Bold";
font-size: large;
}
</style>
</head>
<body>
<div>평창평화체</div>
<script>
let textLoaded = document.fonts.check(
"12px PyeongChangPeace-Bold",
"평창평화체"
);
if (!textLoaded) {
console.log("PyeongChangPeace-Bold 글꼴 로드 X");
// 글꼴이 로드되지 않았다면 강제로 로드시킴
document.fonts
.load("12px PyeongChangPeace-Bold", "평창평화체")
.then(() => {
// 글꼴이 로드되었는지 다시 한번 체크함
textLoaded = document.fonts.check(
"12px PyeongChangPeace-Bold",
"평창평화체"
);
if (textLoaded) {
console.log("PyeongChangPeace-Bold 글꼴 로드 O");
} else {
console.log("PyeongChangPeace-Bold 글꼴 로드 X");
}
});
}
</script>
</body>
</html>
꾸준한 노력파 개발자의 이모저모
오! 이런게 있었다니, 정말 신기한 메소드네요!
보통은 이런 상황이 많지 않을거 같아, 이런 메소드가 있는지 조차 모르고 지나갈텐데
흥미롭네요! canvas를 공부해 볼까 하는데, 캔버스를 계속 사용하다보면 언젠간 저도 이 메소드를 사용할 상황이 올 수도 있겠네요! 좋은 정보 얻고 갑니다!