폰트가 설치돼 있는지 확인해 주는 javascript

npm

has-font라는 npm 패키지를 사용하면 된다. webpack 없이도 사용할 수 있다. 설명 페이지 참고.

jQuery 의존

사용법: jquery.font.js

사실 간단하다.

일단 jquery 사이트에서 jquery를 다운로드한다.

(min 또는 mini가 붙은 것은 공백 따위를 모두 없애서 용량을 정말 최소한으로 만든 것이다. 없는 것은 사람이 알아볼 수 있는 형태로 코드가 정리돼 있다. 줄바꿈, 들여쓰기 등으로 말이다.)

다음, jquery.font.js를 다운로드한다.(여기서 jquery.font.mini.js를 다운받아도 되고, jquery.font.js를 받아도 된다. 클릭하면 소스를 보게 되니, 오른쪽 클릭해서 다른 이름으로 저장하시라.)

둘 다 script로 페이지에 집어넣고(뭐, 굳이 이런 것까지 설명해야 하나 싶지만;;)

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.font.mini.js"></script>

아래 메서드를 사용하면 true나 false를 반환해 준다.

$.font.test('맑은 고딕')

그러니까, 아래와 같은 형태로 활용하면 된다.

if($.font.test('맑은 고딕'))

사용법 : font.js

이것도 사용법이 아주 간단하다. 위처럼 script 태그로 자기 페이지에 집어넣고,

<script type="text/javascript" src="font.js"></script></code>

font.setup() 메서드로 세팅을 한다.

근데 이 setup() 메서드는 페이지가 모두 로드된 다음(정확히 말하면 DOM을 모두 불러온 다음)에 사용해야 하는 것 같다.

따라서 jquery가 제공하는 다음 메서드를 사용하면 좋다.

$(document).ready(function () {
  font.setup(); // run setup when the DOM is ready
});

혹은 아래처럼 해도 이미지를 제외한 페이지를 모두 로딩하면 자바스크립트를 실행한다. (이게 더 편하다.)

$(function () {
  font.setup(); // run setup when the DOM is ready
});

그리고 나서

font.isInstalled('맑은 고딕'); // returns true or false

이렇게 메서드를 사용하면 된다.

그러면 true나 false를 반환해 준다.

그럼 이만.


(2022년 9월 2일에 npm, jQuery 의존 부분을 추가했다.)

“폰트가 설치돼 있는지 확인해 주는 javascript”에 대한 2개의 응답

  1. […] 라이브러리는 jquery.font 다. 이놈은 사용자가 해당 글꼴을 갖고 있는지 감지해 […]

  2. […] 좀 넓혀 주는 게 좋을 거다. 나는 기본적으로 -1px 정도 자간을 좁힌 다음 font 감지 js를 사용해서 나눔바른고딕인 경우엔 letter-spacing을 0으로 설정하는 게 좋은 […]

답글 남기기

이메일 주소는 공개되지 않습니다. 필수 필드는 *로 표시됩니다