[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");
}내 스타일 시트에.
답변
오늘이 웹에서 사용중인 네 개의 글꼴 컨테이너 형식은 다음과 같습니다 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;
}답변
Google.com/webfonts 또는 fontsquirrel.com에서 원하는 글꼴을 찾지 못한 경우 언제든지 사용자가 만든 글꼴로 자신 만의 웹 글꼴을 만들 수 있습니다.
여기에 좋은 튜토리얼이 있습니다 : 나만의 폰트 페이스 웹 폰트 키트 만들기
다른 사람이 귀하의 글꼴을 다운로드하지 못하도록 확실하지는 않지만.
도움이 되었기를 바랍니다,
