웹마스터 팁
에디터 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
제목 | 글쓴이 | 날짜 |
---|---|---|
lang.xml 키워드 사용체크 프로그램 (리눅스/파이썬) | NURIGO | 2014.03.19 |
모바일 화면 사이즈 관련 팁 | 젤리빈 | 2014.03.19 |
폰갭 이용시 파일 첨부 한번에 올리기 | 웹빌드 | 2014.03.20 |
[Jquery] input box border input | pell | 2014.03.21 |
XE코어 수정없이 원하는 기능 넣기 [3] | 마이웹 | 2014.03.22 |
사용자에게 파일 내용을 뿌릴땐 fpassthru를 쓰자 [2] | DynamicLaser | 2014.03.23 |
로그인 안하면 코멘트 볼 수 없게 스킨 수정하는 법 [3] | W.O | 2014.03.23 |
메인 홈페이지와 서브페이지를 하나의 레이아웃으로 | 투씨 | 2014.03.24 |
VB.NET에서 XE로그인 연동하기.[내용추가] [3] | AppSeedKorea | 2014.03.26 |
[SocialXE] 1.7.4.x 업데이트 후 SocialXE에서 '잘못된 요청입니다.' 오류가 뜨는 문제 해결하기 [15] | TUW | 2014.03.26 |
여러가지 hover effect 모음 [1] | 드래그홈 | 2014.03.26 |
여러가지 프로토타이핑 툴 [1] | 드래그홈 | 2014.03.26 |
모바일EX 사용시, 모바일 레벨아이콘 출력하기. [11] | qwms | 2014.03.29 |
index.php에서 Parse Error가 발생한다면 [6] | YJSoft | 2014.04.01 |
[javascript]기초강좌 | 01 자바스크립트개념 | hiwebs | 2014.04.01 |
[javascript] 기초강좌 | 02 산술, 대입, 증감, 비교연산자 | hiwebs | 2014.04.01 |
코어 업데이트 후 회원가입 이름이 숫자(번호)로 뜨는 현상 수정 [1] | 자대련 | 2014.04.01 |
slidesj 사용시 자동으로 다음 사진 넘길때 | 웹빌드 | 2014.04.02 |
이전/다음 글버튼 출력 애드온의 버튼을 사이트 밖으로 빼봅시다..^^ [5] | 착한악마 | 2014.04.03 |
관리자를 제외하고는 타회원의 회원정보 보기를 막는 방법 [1] | sejin7940 | 2014.04.04 |