그누보드5 글꼴 바꾸기 기능 추가
본문
[code]
<!-- 폰트 커스텀{ -->
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothic.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanummyeongjo.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumgothiccoding.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumbrushscript.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/nanumpenscript.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/jejugothic.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/jejuhallasan.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/jejumyeongjo.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/hanna.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/earlyaccess/kopubbatang.css">
<style>
body, .latest_member_id, .latest_subject, .latest_content {
font-family: 'Nanum Gothic', sans-serif;
}
</style>
<!-- }폰트 커스텀 -->
[/code]
그다음 아래의 코드를 원하는 페이지에 삽입합니다.
[code]
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<style>
#fontSelector {
display: none; /* 처음에는 숨김 */
}
</style>
<i class="fa fa-cog" id="gearIcon" style="cursor: pointer;"></i>
<select id="fontSelector">
<option value="Nanum Gothic">나눔고딕</option>
<option value="Nanum Myeongjo">나눔명조</option>
<option value="Nanum Gothic Coding">나눔고딕 코딩</option>
<option value="Nanum Brush Script">나눔손글씨 붓</option>
<option value="Nanum Pen Script">나눔손글씨 펜</option>
<option value="Jeju Gothic">제주 고딕</option>
<option value="Jeju Hallasan">제주 한라산</option>
<option value="Jeju Myeongjo">제주 명조</option>
<option value="Hanna">한나체</option>
<option value="KoPub Batang">바탕체</option>
</select>
<script>
const gearIcon = document.getElementById('gearIcon');
const fontSelector = document.getElementById('fontSelector');
gearIcon.addEventListener('click', () => {
// fontSelector의 표시 상태를 토글
if (fontSelector.style.display === 'none' || fontSelector.style.display === '') {
fontSelector.style.display = 'block';
} else {
fontSelector.style.display = 'none';
}
});
</script>
[/code]
사용하는 폰트의 종류는
https://m.blog.naver.com/PostView.naver?blogId=ohhyun93&logNo=221071033677&proxyReferer=https:%2F%2Fwww.google.com%2F&trackingCode=external
에서 소개하는 폰트를 사용하였습니다.
등록된 댓글이 없습니다.