'Font'에 해당되는 글 2건

Programming/HTML CSS
보통 웹 브라우저에 특정 폰트로 글자를 표시하려면 해당 폰트가 사용자의 컴퓨터에 설치되어 있어야 합니다.  하지만 세상에 존재하는 모든 폰트가 사용자의 컴퓨터에 다 담겨져 있다는 보장은 할 수 없기에 그 대안으로 웹폰트를 사용합니다.

웹폰트는 사용자가 웹에 접속하게 되면 필요한 웹폰트를 자동으로 내려받아 설치하고 설정된 폰트대로 웹문서를 볼 수 있도록 합니다.

웹폰트는 문서의 헤더에 다음과 같은 구문을 추가함으로서 설치할 수 있습니다.
<head>
 <link href='http://fonts.googleapis.com/css?family=Fruktur' rel='stylesheet' type='text/css'>
</head>
참고로 예제에 설정된 웹폰트는 구글에서 제공하는 것으로 아래 사이트를 방문하면 더 많은 폰트를 보실 수 있습니다.

http://www.google.com/fonts

위에서 처럼 폰트를 설치하고 나면 해당 폰트가 적용될 부분을 CSS로 지정하기만 하면 됩니다.
<style>
 #ff {
  font-family: 'Fruktur', cursive;
 }
</style>
이렇게 하면 아래와 같은 내용이 본문에 포함되는 경우 ff  아이디의 div 내용이 위에서 설치한 폰트로 보여지도록 처리가 이루어 질 수 있습니다.
<div id="ff">KOREA</div>

'Programming > HTML CSS' 카테고리의 다른 글

[CSS3] 글자 생략하기  (0) 2013.08.21
[HTML] viewport meta  (0) 2013.08.20
[CSS] 웹폰트(Web font)  (0) 2013.08.19
[CSS3] 초기화 코드 사이트  (0) 2013.07.01
[HTML5] track (video 자막)  (0) 2013.06.28
[CSS3] 선택자 - 상태 선택  (0) 2013.06.24
0 0
Programming/HTML CSS
1. font 사용
<font color="red">붉은색</font>
2. font 속성

(1) size

1~7까지의 값을 사용, 각 숫자에 해당하는 글자 크기는 다음과 같습니다.

 1  8pt
 2  10pt
 3  12pt
 4  14pt
 5  18pt
 6  24pt
 7  36pt

(2) color

글자의 색상을 부여합니다. 색은 red 처럼 직접 색상이름을 지정하거나 #ffa500 처럼 16진수 RGB값을 사용합니다.

(3) face

"명조체" 처럼 글꼴를 지정합니다. 다만 해당 글꼴는 사용자(엄밀히 웹사이트 방문자)의 컴퓨터에 설치된 글꼴이어야 하며 해당 글꼴이 없으면 '굴림'체로 표시됩니다.

글꼴은

<font face="글꼴1, 글꼴2...">글자내용</font>

처럼 여러개 지정할 수 있으며 컴퓨터에 글꼴1이 존재하는 경우 글꼴1을 사용하고 글꼴1이 없으면 그 다음 글꼴2를 사용하는 식으로 작용합니다.

(4) title

title 속성에는 원하는 내용을 담을 수 있으며 title 속성이 사용된 해당 font 태그내용에 마우스를 가져다 대면 지정한 내용을 풍선도움말로 표시합니다.


3. FONT CSS
.css_font {
 font-family:굴림;
 font-size:xx-large;
}
▶css 정의
<span>일반글자</span><br />
<span class="css_font">css 적용</span>
▶적용 HTML

4. FONT CSS 속성

(1) font-family

글꼴 종류를 지정합니다. 해당 글꼴에는 font-family:폰트1, 폰트2, 폰트3... 처럼 연속해서 지정할 수 있으며 폰트1이 없는 경우 폰트2를.. 폰트2가 없는 경우 폰트3이 적용됩니다.

모든 웹사이트 방문자가 설정된 폰트를 가지고 있다고 장담할 수 없으므로 대부분의 경우 마지막에 Serif 나 Sans-serif 또는 Mono space를 지정합니다. 이러한 폰트지정한 앞에서 먼저 제시된 폰트를 표시할 수 없는 경우 사용자의 웹브라우저에 기본적으로 설정된 폰트를 대신 적용하도록 합니다.

폰트명을 지정할때 Tahoma 처럼 한 단어로 이루어진 경우는 별 문제가 안되지만 Arial Black 처럼 공백을 사이에 두고 두 단어로 이루어진 폰트명을 사용할때는
font-family: 'Arial Black';
처럼 따옴표를 붙여야 합니다.

(2) font-style

글꼴 모양을 지정합니다. 이 속성에는 normal(일반), italic(이탤릭체), oblique(기울임) 값을 지정할 수 있습니다.

(3) font-size

글꼴의 크기를 지정합니다. 크기는 숫자로 지정할 수 있으며 font-size:1pt 처럼 정수를 사용해 지정할 수도 있습니다. 정수를 사용하는 경우 in(인치), cm(센치미터), mm(밀리미터), pt(포인터), pc(피카스) 단위를 사용하며 em(1당 기본글꼴 2배), ex(em대비 1/2크기), px(픽셀), %(%단위)등의 상대적 단위크기를 사용하기도 합니다.

정수가 아니면 xx-small, x-small, small, medium, large, x-large, xx-large 와 같이 문자로 지정할 수 있습니다. 이때는 xx-small부터 font-size 값을 1로 하여 1씩 늘어나는 크기와 같습니다.

(4) font-variant

normal, small-caps 값을 지정할 수 있습니다. small-caps값을 지정하는 경우 영문자를 사용할때 소문자를 대문자로 바꾸게 됩니다.

(5) font-weight

글꼴의 두께를 지정합니다. 숫자로 값을 지정하는 경우 100~900사이 값을 사용하며 normal, bold, bolder, lighter등의 문자값을 사용할 수도 있습니다.

(6) line-height

글자의 높이를 지정합니다. 이 속성을 사용하면 실제 글자가 세로로 커지는 것이 아니라 해당 글자가 세로로 차지하는 공간을 넓히게 됩니다.

(7) font

이미 설명드린 1 ~ 6 번까지의 속성을 한번에 지정할 수 있는 속성으로 다음과 같은 순서로 입력합니다.

font: [font-style] [font-weight] [font-size] / [line-height] [font-family];

'Programming > HTML CSS' 카테고리의 다른 글

[HTML / HTML5 / CSS] ol, ul, li (목록)  (0) 2013.03.25
[HTML / HTML5] p (문단)  (0) 2013.03.22
[HTML / CSS] font  (0) 2013.03.21
[HTML / HTML5] h (제목)  (0) 2013.03.20
[HTML] 특수문자 코드표  (0) 2013.03.19
[HTML] HTML / CSS  (0) 2013.03.18
0 0
1
블로그 이미지

클리엘