웹마스터 팁
에디터 9pt 추가 및 에디터에도 웹폰트 보이게 하기.
2008.09.11 21:31
9월 18일.
font-family 이름이 한글인 경우 기존처럼 에디터에 표시가 안되는 문제 발견
font-family 이름을 영문으로 정하고 에디터에서는 폰트명만 한글로 표시될수 있도록 글을 수정합니다.
안녕하세요.
1.0.5 버전 기준으로 설명드리겠습니다.
1. 웹폰트도 에디터에서 보이게 하는 방법
여기 팁게시판에 보면 웹폰트 적용하기 를 하시면
글을 작성하고 완료를 하면 잘 보이지만 에디터에는 적용이 안되는걸로 압니다.
첫째, 다음과 같이 webfont.css 를 만듭니다.
예)
@charset "utf-8"; @font-face {font-family:web1;src:url(./webfont1.eot);} @font-face {font-family:web2;src:url(./webfont2.eot);}
주의 font-family 를 한글로 하실경우, 기존처럼 에디터에는 적용이 안됩니다. 영문으로 하셔야 합니다.
만약 이름만 한글로 표시하고 싶다면 밑에 Tip 을 참고 하세요. 일단 다섯째까지 하시고 적용하셔야 합니다.
둘째, webfont.css 파일과 가지고 있는 웹폰트 파일을 자신이 사용하는 레이아웃/css 폴더에 넣습니다.
예) zbxe / layouts / 자신이사용하고레이아웃 / css
셋째, 자신이 사용하는 layout.html 맨 윗줄에 <!--%import("css/webfont.css")--> 을 추가합니다.
관리 - 레이아웃 편집에서 추가하셔도 됩니다.
넷째, / modules / editor / tpl / js / editor.js 을 엽니다.
var contentHtml = ''+ '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">'+ '<html lang="ko" xml:lang="ko" xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>'+ '<link rel="stylesheet" href="http://자신의도메인/zbxe/layouts/사용하는레이아웃스킨/css/webfont.css" type="text/css" charset="UTF-8" media="all" />'+ '<style type="text/css">'+ 'body {font-family:Verdana,Gulim;font-size:9pt;height:'+editor_height+'px; padding:0; margin:0; background-color:transparent; color:'+font_color+';}'+ '</style>'+ '</head><body editor_sequence="'+editor_sequence+'">'+ content+ '</body></html>'+ '';
제일 중요합니다. 이부분이 기존의 Tip 과 다른점입니다. 이부분을 꼭 해주셔야 에디터에 웹폰트가 적용됩니다.
122번줄을 추가합니다. 절대경로값을 자신의 계정에 알맞게 수정합니다.
다섯째, zbxe / modules / editor / lang / ko.lang.php ( 다른언어도 사용하시면 다른언어도 수정)
55번째 줄 보시면 글씨체가 많은데 넣고 싶은 위치에 자신의 웹폰트를 넣으시면 됩니다
예)
"web1",
"web2",
주의 하실점은 첫째의 font-family 이름과 같아야 합니다.
이제 잘 적용 될겁니다^_^;;
Tip.
font-family 를 한글이름으로 정할경우 기존과 마찬가지로 에디터에 표시가 안되는 문제가 있습니다.
이점은 간단한게 에디터에만 한글로 표시되고 그 값은 영문으로 받게끔 수정하는 방법을 사용했습니다.
일단 다섯째 까지 전부 해주시고 하셔야 합니다. 물론 font-family 이름도 영문으로 정하셔야 합니다.
다음의 파일을 엽니다. zbxe / modules / editor / lang / ko.lang.php
54번 라인을 보시면 다음과 같이 수정합니다.
$lang->edit->fontlist = array( "굴림" => "굴림", "돋움" => "돋움", "바탕" => "바탕", "궁서" => "궁서", "times" => "times", "Courier" => "Courier", "Tahoma" => "Tahoma", "Arial" => "Arial", "Verdana" => "Verdana", "web1" => "웹폰트1", "web2" => "웹폰트2", );
왼쪽이 font-family 값을 갖게 되고 오른쪽이 단지 에디터에서 표시만 될 값입니다.
밑에 2개의 값은 위의 예시에 따라 web1 , web2 로 정했습니다.
이렇게 쓰시면 에디터에는 웹폰트1 , 웹폰트2 로 출력이 되고 선택을 하면 그 값을 web1, web2 로 갖게 됩니다.
그러기 위해 다음 파일을 엽니다. 에디터를 디폴트인 이지웍에디터를 사용한다고 가정했을경우 입니다.
zbxe / modules / editor / skins / default / editor.html
25번째 라인 입니다.
<select onchange="editorChangeFontName(this,'{$editor_sequence}')" id="editor_font_{$editor_sequence}"> <option value="">{$lang->edit->fontname}</option> <!--@foreach($lang->edit->fontlist as $key=>$obj)--> <option style="font-family:{$key}" value="{$key}">{$obj}</option> <!--@end--> </select>
28번째 라인인 font-family 값과 value 값인 {$obj} 를 {$key} 값으로 수정합니다.
위처럼 하시면 에디터에는 한글로 표시 될 겁니다.
2. 글자 크기 9pt 추가하기
편법을 이용하는 방법입니다.
modules / editor / skin / default / editor.html 을 엽니다.
<option value="" selected="selected">{$lang->edit->fontsize}</option> <option value="1">8pt</option> <option value="A">9pt</option> <option value="2">10pt</option> <option value="3">12pt</option> <option value="4">14pt</option> <option value="5">18pt</option> <option value="6">24pt</option> <option value="7">36pt</option>
35번라인을 추가합니다.
밸류값을 숫자가 아닌 영문으로 줘서 값이 오류로 인식하여 디폴트값인 9pt 로 입력이 됩니다.
- [2011/05/26] 웹마스터 팁 웹폰트의 개념과 사용법 *2
- [2010/10/07] 웹마스터 팁 나눔고딕 웹폰트가 아닌 API로 적용하여 사용해보자!! *10
- [2009/01/23] 묻고답하기 웹폰트를 적용중인데요 본문에서 나온 부분을 어느 CSS를 수정해야는지요 ? *3
- [2007/08/17] 웹마스터 팁 위지웍 에디터 웹폰트 사용하기 *6
댓글 13
제목 | 글쓴이 | 날짜 |
---|---|---|
게시판 에디터 폰트 글자(글씨)크기 변경하는 법 | 씨에씨에 | 2008.09.12 |
사진 한꺼번에 일괄적으로 올리기 [4] | 안정수650 | 2008.09.12 |
에디터 9pt 추가 및 에디터에도 웹폰트 보이게 하기. [13] | 욜리 | 2008.09.11 |
IP 주소 4자리수 모두 공개하는 방법 [1] | 블루파티 | 2008.09.11 |
블로그, 홈페이지 가입시 자동 입력되는 http:// 없애기 [2] | 류영무 | 2008.09.09 |
등록하시겠습니까? 등록할까요? 안 나오고 바로 글 등록되게 하는 법 [6] | 황건순 | 2008.09.08 |
다음카페에 끊김없이 음악나오게 하기 | 푸른커튼 | 2008.09.06 |
동일서버내 페이지에서 로그인정보 활용하기... [4] | 수로 | 2008.09.06 |
회원 포인트 선물 하기 등 포인트 변경시 바로 적용 방법 | 한꼬마 | 2008.09.06 |
카멜레온 최근글 위젯 클릭시 새창 팁 | 가랑바람 | 2008.09.04 |
[우클릭 및 드레그 방지법] 및 [방지된 홈페이지 해재법] >0< [7] | 이홍석295 | 2008.09.03 |
각 리스트형 위젯에 페이지 기능을 달자. [10] | 라르게덴 | 2008.09.02 |
원하는 위치에 구글 (맞춤)검색창 달기 [2] | 다케루 | 2008.09.02 |
문서 카테고리를 메뉴에 적용하기 위한 레이아웃 수정 팁과 개념토론 [7] | 제베 | 2008.08.31 |
메인화면에 플래시 쉽게 삽입하는 방법.. [12] | 청개구리00 | 2008.08.30 |
밑에 페이지 네비게이션 수정 (다음10개, 이전10개등으로) [6] | Clanss | 2008.08.29 |
댓글(코멘트) 입력창에 이미지 넣기 [19] | skyatc | 2008.08.29 |
음악넣는 BGM코드 70종류 입니다 [1] | 푸른커튼 | 2008.08.25 |
한 페이지(화면)에 두개(2개)의 모듈(게시판 등)을 넣는 법 [6] | 황건순 | 2008.08.25 |
라이프팟 연동에서 XML 주소 얻기 | 최재원541 | 2008.08.23 |