npm
has-font
라는 npm 패키지를 사용하면 된다. webpack 없이도 사용할 수 있다. 설명 페이지 참고.
jQuery 의존
- jquery.font: jQuery 플러그인이다.
- font.js: 객체를 로드해 쓴다.
사용법: 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 의존 부분을 추가했다.)
나눔고딕으로 Cufon 적용 후, 글꼴이 있는 사람에게는 적용하지 않기 에 응답 남기기응답 취소