2010-04-04 7 views
1

서예 글꼴로 일부 텍스트를 표시하려면 어떻게 사용자 컴퓨터를 렌더링할지 알 수 있습니까? 그 사람이 컴퓨터에 어떤 글꼴을 가지고 있는지 또는 중요한지 어떻게 알 수 있습니까? CSS에서 이것을하는 좋은 예는 무엇입니까?웹 사이트의 서체 글꼴

나는 포토샵에 함께 넣고 이미지로 저장하는 것이 더 낫다.

+2

http://doctype.com에서이 질문에 대한 더 나은 답변을 얻을 수 있습니다. –

답변

2

자주 변경하지 않을 제목과 멋진 페이지 요소에 글꼴을 사용하는 경우 포토샵에서 이미지를 사용합니다.

본문에 글꼴을 사용하려면 CSS에서 글꼴 모음을 정의하는 것이 좋습니다. 내가 찾은 폰트가 다운로드되어 있고 최종 사용자가 가지고 있지 않다면 현재의 OS에서 사용하고 싶은 글꼴을 찾을 수 있습니다. 시스템 글꼴이나 ms 단어와 같은 주요 소프트웨어 응용 프로그램과 함께 제공되는 글꼴이 최종 사용자 컴퓨터에서 사용할 수있는 좋은 기회입니다. 일단 당신이 사용하고자하는 글꼴을 발견했다면 나는 약간의 조사를하고 맥의 맛과 심지어 유닉스의 맛에서 비슷한 것을 찾을 수 있는지 알아볼 것입니다.

body 
{ 
font-family:"DejaVu Sans","DejaVu Sans Mac Name","DejaVu Sans Unix Name","Times New Roman" 
} 

그것의 항상 좋은 브라우저가 첫 번째 글꼴로 시작하는 목록에 가장 적합한을 선택합니다 당신이 다른 사람의 컴퓨터에서 작동합니다 알고있는 백업 글꼴을 사용 일치하는 항목을 찾을 때까지 그것의 방법을 작동 언급합니다.

1

CSS에 TTF 글꼴 파일을 포함시킬 수 있습니다.

그것의 좋은 예는 here입니다 :

/* DejaVu Sans 2.24 
    http://dejavu.sourceforge.net/wiki/index.php/Main_Page */ 
@font-face { 
    font-family: "DejaVu Sans"; 
    src: url("data:application/octet-stream;base64,[BASE-64-ENCODED-FILE-CONTENTS]") 
} 

편집 :

참고 :이 내용은 아마도 크롬 파이어 폭스에서 작동하고 있습니다.

Microsoft는 Embedded OpenType 형식을 사용하여 웹 페이지에 글꼴을 포함시키는 방법에 대해 document을 게시했습니다.

@font-face { 
    font-family: Piefont; 
    font-style: normal; 
    font-weight: normal; 
    src: url(PIE0.eot); 
} 

(이것은 공식 온라인 데모 here에서 당겨졌다) : 그것은 EOT 파일에 글꼴을 변환 한 후 다음 구문을 사용하여 스타일 시트를 참조하는 것을 포함한다.

아래 Boldewyn의 대답을 바탕으로 src: 매개 변수의 TTF 파일을 사용할 수도 있습니다.

+2

여러 브라우저에서 작동하지 않습니다. –

+0

@NSD - 정말 고맙습니다. IE를 지원하는 대답을 업데이트했습니다. – amphetamachine

0

나는 내 개인 웹 사이트에 @font-face을 사용하는 경향이 있습니다. 그러나 당신이 그것을 위해 무엇을하고 있는지에 따라 다릅니다.

처음 .. 질문. 정적 텍스트입니까, 게시 헤드 라인 등등에 대해 이야기하고 있습니까?

기본 제목과 마찬가지로 정적 텍스트도 이미지와 함께 표시됩니다. <h1><strong>Same text as the image(seo)</strong></h1>

과 CSS를 H1 {배경
: 홈페이지 (/ 이미지/사용 - 더 - 텍스트로서의 이미지 이름에 대한 현서.png) no-repeat 상단 왼쪽; 너비 : 100px; height/height : 30px;}/* 너비와 높이가 이미지 너비/높이 / h1 strong {위치 : 절대; 왼쪽 : -8000 픽셀}/ 텍스트가 이미지 위에 나타나지 않지만 서재/스크린 리더 목적으로 숨기기 */

역동적 인 자세가 필요하고 우아한 퇴화 이상의 것이 필요한 경우 sIFR로 이동하십시오. 우아한 분해가 받아 들여지면 @font-face

0

으로 이동하십시오. 서포터에 추가하려면 : Paul Irish은 모든 최신 브라우저와 IE5.5까지의 모든 IE에서 작동하는이 CSS 선언의 버전을 게시했습니다. 그러나이 기술을 사용하려면 TTF와 EOT 형식으로 글꼴이 필요합니다.

글꼴 라이센스로 허용되는 경우 형식간에 앞뒤로 변환 할 수있는 많은 도구가 있습니다. 그냥 구글.