웹마스터 팁
에디터에 웹폰트를 추가하여 사용하기
2010.10.18 13:27
*주의
본 설명은 2010.9.30일에 릴리즈된 XE Core 최신버전 1.4.4.1을 기준으로하여 설명된 것입니다.
이 버전보다 이하인 경우 업데이트 후 이용하실 것을 권장합니다.
설명
XE를 이용하는 홈페이지 전체에 웹폰트를 적용하여 이용하는 방법을 설명한 것입니다.
기존에 설명자료에선 에디터상에서 웹폰트가 적용된 것을 확인할 수 없다고 하셨었는데 제가 아래와 같은 방법으로
테스트해본 결과 에디터상에서 바로 웹폰트가 적용된 것을 확인할 수 있었습니다.
본 설명은 초보자에 이해를 돕기 위해 이미지가 포함되어 있습니다.
테스트환경
XE Core 1.4.4.1 Ver.
IE8
WindowsXP Professinal K Service Pack3
오류정보
현재까지 알려진 오류가 없습니다.
저작권
본 게시물에 대한 저작권은 하얌이에게 있습니다.
무단스크랩 및 배포를 자제해주시기 바랍니다.
수정파일 :
xe/common/css/default.css
xe/modules/editor//lang/ko.lang.php
xe/modules/editor/styles/default/editor.css
xe/modules/editor/tpl/css/editor.css
xe/modules/editor/tpl/js/editor.js xe/layouts/레이아웃스킨/layout.html 생성파일 : xe/layouts/레이아웃스킨/css/webfont.css
첫째, default.css를 열고 맨 윗줄에 아래와 같이 소스를 입력하고 저장하세요. @font-face {font-family:웹폰트명(영어로 작성하세요.);src:url(http://도메인명/xe/웹폰트경로);}
그림설명 둘째, styles/default/editor.css를 열고 맨 윗줄에 아래와 같이 소스를 입력하고 저장하세요. @charset "utf-8"; @font-face {font-family:웹폰트명(영어로 작성하세요.);src:url(http://도메인명/xe/웹폰트경로);}
그림설명 셋째, tpl/css/editor.css를 열고 맨 윗줄에 아래와 같이 소스를 입력하고 저장하세요. @charset "utf-8"; @font-face {font-family:웹폰트명(영어로 작성하세요.);src:url(http://도메인명/xe/웹폰트경로);}
그림설명 넷째, ko.lang.php를 열고 editor.css에 입력된 웹폰트명을 추가하세요. $lang->edit->fontlist = array(
그림설명 다섯째, ./xe/layouts/현재 사용하고 있는 레이아웃 스킨/css에 webfont.css를 만들고 아래와 같은 소스를 추가한 후 저장합니다. @charset "utf-8"; @font-face {font-family:웹폰트명(영어로 작성하세요.);src:url(http://도메인명/xe/웹폰트경로); font-size:10pt;}
그림설명 여섯째, ./xe/layouts/현재 사용하고 있는 레이아웃 스킨에 layout.html을 열고 맨 윗줄에 아래와 같은 소스를 추가한 후 저장합니다. <!--%import("css/webfont.css")-->
그림설명 일곱째, editor.js를 열고 135번줄에 있는 아래 소스를 찾습니다. '<html xmlns="http://www.w3.org/1999/xhtml><head><meta http-equiv="content-type" content="text/html; charset=utf-8"/>'+ "이곳에" "이곳에"부분에 아래 소스를 추가합니다. '<link rel="stylesheet" href="도메인명/xe/layouts/레이아웃 스킨/css/webfont.css" type="text/css" charset="UTF-8" media="all" />'+
그림설명 자 이제 설정을 모두 마쳤습니다. 수정된 파일을 FTP를 통해 해당경로에 업로드 시켜주시면 정상작동합니다.
'웹폰트명' => '웹폰트',
'Dotum' => '돋움',
'Gulim' => '굴림',
'Batang' => '바탕',
'Arial' => 'Arial',
'Arial Black' => 'Arial Black',
'Tahoma' => 'Tahoma',
'Verdana' => 'Verdana',
'Sans-serif' => 'Sans-serif',
'Serif' => 'Serif',
'Monospace' => 'Monospace',
'Cursive' => 'Cursive',
'Fantasy' => 'Fantasy',
);
@font-face {font-family:웹폰트명(영어로 작성하세요.);src:url(http://도메인명/xe/웹폰트경로); font-size:9pt;}
'<style type="text/css">'+
댓글 3
-
빛의바다
2010.11.11 16:22
-
아리세
2010.11.22 14:14
으아 ...... 하라는대로했는데 안됨 ㅜㅜㅜ
@font-face {font-family:웹폰트명(영어로 작성하세요.);src:url(http://도메인명/xe/웹폰트경로)undefined;}
에서
@font-face {font-family:ttche9;src:url(http://pera.kr/xe/http://pera.kr/font/ttche9.eot);}
이렇게 해야함?
웹폰트 경로설정 하는법좀 ㅡㅡ;
예를들어 말씀해주세요 ㅠㅠ
-
지나가는人
2010.12.25 15:47
제목 | 글쓴이 | 날짜 |
---|---|---|
1.5.1에서 파일업로드가 안 되는 분 보세요. [12] | 별님왕자 | 2011.12.07 |
스크립트파일(js)을 하단부에서 불러오게 하기 [1] | Treasurej | 2011.12.09 |
XE관리자 메뉴 활용 방법 ^^
[24]
![]() | 똥똥 | 2011.12.09 |
코어 1.5.1에서 회원정보에 성별아이콘 쓰기
![]() | 늘푸른이 | 2011.12.10 |
코어 1.5.1에서 회원목록에 성별아이콘 쓰기(수정) | 늘푸른이 | 2011.12.10 |
제로보드 xe 쇼핑몰 오늘본 상품 퀵메뉴 만드는 법 알려주세요 | 유유히 | 2011.12.15 |
나눔고딕 웹 폰트 적용하기. [10] | 정찬명 | 2011.12.15 |
계정 용량 측정 소스 (펌)
[1]
![]() | rjsoo | 2011.12.16 |
친절한설명! 자신의홈페이지에 간단히 음악넣기
[10]
![]() | 준봉쿠 | 2011.12.18 |
XE 1.5 이상에서 XE 1.4.5.10 이하 버튼 사용하기
[4]
[1] ![]() | 웹 엔진 | 2011.12.18 |
1.5 업데이트후 블로그스킨, 리스트에서 내용출력안되는분 수정방법 [4] | Xiso | 2011.12.23 |
XE 1.5.1 업그레이드시 조심해야 [1] | 소걸음 | 2011.12.23 |
XE 애드온 개발하기 | 우진홈 | 2011.12.24 |
확정변수 로 프린트 페이지 꾸미기(/print_page.html) | 세상의지배자 | 2011.12.26 |
XE에서 Context의 이해 [3] | 우진홈 | 2011.12.28 |
rewrite rule 예외처리하기 [2] | 대류 | 2012.01.01 |
계정(HDD) 사용량 출력하기 | 대류 | 2012.01.01 |
Mysql DB사용량 출력하기 [4] | 대류 | 2012.01.01 |
현재 트래픽 출력하기 [1] | 대류 | 2012.01.01 |
XE 외부페이지 직접접속 차단 및 다국어 설정팁 [4] | 라르크앙시엘 | 2012.01.01 |
아직 적용해보지는 않았지만 찾고있던 팁입니다~
감사합니다~^^