Wednesday, August 01, 2007
HTML 웹페이지 기본 텍스트 글꼴 지정 방법; Basic Font
HTML 웹문서에서, "기본 글꼴"을 지정하는 방법입니다. 다음과 같이 <style type="text/css">... 태그 안에서 body 태그의 스타일을 정의해 주면 간단합니다. body 태그는 본문 자체를 나타내는 태그이기에, body 태그에 폰트 스타일을 지정하면 기본 텍스트 글꼴을 지정/변경할 수 있습니다. font-size 로는 "기본 글꼴 크기"를 지정할 수 있습니다. 다음 예제와 같습니다.
예제 웹페이지 파일명: example.html
원래 인터넷 브라우저의 기본 글꼴은 "궁서체"가 아니라 "굴림"이나 "굴림체"인데, 여기서는 예를 들기 위해 궁서체로 지정했습니다. 다른 폰트명으로 변경하여 사용하시면 됩니다.
예제 웹페이지 파일명: example.html
<html>
<head>
<title>여기에 페이지 제목 기입</title>
<style type="text/css">
body {
font-family:'궁서체';
font-size:10pt;
}
</style>
</head>
<body>
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
</body>
</html>
<head>
<title>여기에 페이지 제목 기입</title>
<style type="text/css">
body {
font-family:'궁서체';
font-size:10pt;
}
</style>
</head>
<body>
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
이곳은 본문입니다. 이제 이 본문에서는 기본 텍스트 글꼴이 궁서체로 나옵니다.<br />
</body>
</html>
원래 인터넷 브라우저의 기본 글꼴은 "궁서체"가 아니라 "굴림"이나 "굴림체"인데, 여기서는 예를 들기 위해 궁서체로 지정했습니다. 다른 폰트명으로 변경하여 사용하시면 됩니다.
tag: html
HTML | CSS | 자바스크립트 JavaScript
쇼핑몰 디자인을 하고 있는데 지정된 폰트가 마음에 안 들어서 상업적으로 사용할 수 있는 폰트를 다운받았는데 이걸 어디 저장하고 ....위에서 설명하신대로 지정하면 그 폰트를 사용할 수 있을까요? 알려주심 정말 감사하겠습니다.
다운받으신 폰트 파일을 자신의 컴퓨터에서 개인적으로 사용하시려면, 윈도우 XP의 경우
C:\WINDOWS\Fonts
라는 폴더에 복사해 넣어시면 됩니다.
그러나 웹페이지 디자인에서는 그 다운받으신 폰트 파일을 사용하시기 힘듭니다, 왜냐하면 방문객의 컴퓨터에는 그 폰트 파일이 없을 가능성이 높고 그러면 폰트를 지정해도 방문객의 눈에는 그냥 보통의 기본폰트(굴림체 등등)로 보입니다.
다만 "웹폰트(Web Font)"라는 특수한 폰트 기술을 사용하시면, 자신이 좋아하는 특정 글꼴을 모든 방문객에게 보여드릴 수 있지만, 유료이고, 가독성이 많이 떨어지게 됩니다.
혹시 웹폰트(Web Font)에 관심이 있으시다면, 저는 추천하지 않습니다, 웹폰트는 첫눈에는 예쁘지만, 글자를 몹시 읽기 힘들게 만들기 때문입니다.
아하...그렇군요. 자세한 설명 정말 감사합니다.
<< Home