CSS를 사용하여 사용자 정의 글꼴을 사용하십니까?

CSS를 사용하여 사용자 정의 글꼴을 사용하십니까?

---

사이트에서 사용자 정의 글꼴을 사용하는 일부 새로운 웹 사이트 (일반 Arial, Tahoma 등 제외)를 보았습니다.

그리고 많은 브라우저를 지원합니다.

어떻게합니까? 또한 가능한 경우 사람들이 글꼴을 무료로 다운로드 할 수 없도록합니다.

---

일반적으로 @font-faceCSS에서를 사용하여 사용자 정의 글꼴을 사용할 수 있습니다 . 다음은 매우 기본적인 예입니다.

@font-face {
    font-family: 'YourFontName'; /*a name to be used later*/
    src: url('http://domain.com/fonts/font.ttf'); /*URL to font*/
}

그런 다음 특정 요소에서 글꼴을 사용하려면

.classname {
    font-family: 'YourFontName';
}

( .classname선택자입니다).

특정 글꼴 형식이 모든 브라우저에서 작동하지는 않습니다. 당신이 사용할 수있는 fontsquirrel.com 변환 너무 많은 노력을 피하기 위해의 발생을.

Google Fonts에서 제공하는 멋진 무료 웹 글꼴 세트를 찾을 수 있습니다 (또한 자동 생성 된 CSS @font-face규칙이 있으므로 직접 작성할 필요는 없습니다).

또한 가능한 경우 사람들이 글꼴을 무료로 다운로드 할 수 없도록합니다.

아니요, CSS를 통해 포함 된 사용자 정의 글꼴로 텍스트의 스타일을 지정할 수는 없지만 사람들이 텍스트를 다운로드하지 못하게 할 수는 없습니다. 이미지, Flash 또는 HTML5 Canvas 를 사용해야합니다 . 모두 실용적이지 않습니다.

도움이 되었기를 바랍니다.

---

글꼴이 브라우저 간 호환 가능하도록하려면 다음 구문을 사용해야합니다.

@font-face {
    font-family: 'Comfortaa Regular';
    src: url('Comfortaa.eot');
    src: local('Comfortaa Regular'), 
         local('Comfortaa'), 
         url('Comfortaa.ttf') format('truetype'),
         url('Comfortaa.svg#font') format('svg'); 
}

여기 에서 찍은 .

---

글꼴 파일을 다운로드하여 CSS에로드해야합니다.

Fe 웹 응용 프로그램에서 Yanone Kaffeesatz 글꼴을 사용하고 있습니다.

나는 그것을 통해 그것을 사용한다

@font-face {
    font-family: "Yanone Kaffeesatz";
    src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}

내 스타일 시트에.

---

Google.com/webfonts 또는 fontsquirrel.com에서 원하는 글꼴을 찾을 수없는 경우 언제든지 만든 글꼴로 자신 만의 웹 글꼴을 만들 수 있습니다.

여기에 좋은 튜토리얼이 있습니다 : 나만의 폰트 페이스 웹 폰트 키트 만들기

다른 사람이 귀하의 글꼴을 다운로드하지 못하도록 확실하지는 않지만.

도움이 되었기를 바랍니다,

---

CUFON 이라는 흥미로운 도구도 있습니다 . 이 블로그 에서 사용하는 방법에 대한 데모가 있습니다 . 정말 간단하고 흥미 롭습니다. 또한 사람들이 생성 된 콘텐츠를 ctrl + c / ctrl + v 할 수 없습니다.

---

오늘이 웹에서 사용중인 네 개의 글꼴 컨테이너 형식은 다음과 같습니다 EOT, TTF, WOFF,과WOFF2.

불행히도 다양한 선택에도 불구하고 모든 이전 및 새 브라우저에서 작동하는 단일 범용 형식은 없습니다.

• EOT 는 IE 전용입니다.
• TTF 는 부분적인 IE 지원을 가지고 있습니다.
• WOFF 는 가장 광범위한 지원을 제공하지만 일부 구형 브라우저에서는 사용할 수 없습니다
• WOFF 2.0 지원은 많은 브라우저에서 진행중인 작업입니다.

웹 브라우저가 모든 브라우저에서 동일한 글꼴을 갖도록하려면 CSS에서 4 가지 글꼴 유형을 모두 제공 할 수 있습니다

 @font-face {
      font-family: 'besom'; !important
      src: url('fonts/besom/besom.eot');
      src: url('fonts/besom/besom.eot?#iefix') format('embedded-opentype'),
           url('fonts/besom/besom.woff2') format('woff2'),
           url('fonts/besom/besom.woff') format('woff'),
           url('fonts/besom/besom.ttf') format('truetype'),
           url('fonts/besom/besom.svg#besom_2regular') format('svg');
      font-weight: normal;
      font-style: normal;
  }

---

Win 8에서 작업 중입니다.이 코드를 사용하십시오. 그것은 IE와 FF, Opera 등에서 작동합니다. 내가 이해 한 것 : woff font는 Google fonts에서 일반적이며 일반적입니다.

ttf 글꼴을 woff로 변환하려면 여기 로 이동 하십시오 .

@font-face
{
    font-family:'Open Sans';
    src:url('OpenSans-Regular.woff');
}

참고 URL : https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css