CSS를 사용하여 사용자 지정 글꼴을 사용하시겠습니까?
사이트에서 사용자 지정 글꼴을 사용하는 새로운 웹 사이트(일반 Arial, Tahoma 등 제외)를 본 적이 있습니다.
그리고 그들은 상당한 양의 브라우저를 지원합니다.
사람이 어떻게 그걸 하니?또한 가능한 경우 사람들이 글꼴을 다운로드할 수 있는 무료 액세스 권한을 갖지 못하도록 합니다.
일반적으로 다음을 사용하여 사용자 정의 글꼴을 사용할 수 있습니다.@font-face당신의 CSS에.다음은 매우 기본적인 예입니다.
@font-face {
font-family: 'YourFontName'; /*a name to be used later*/
src: url('http://domain.example/fonts/font.ttf'); /*URL to font*/
}
그런 다음 특정 요소에서 글꼴을 사용하려면 다음을 수행합니다.
.classname {
font-family: 'YourFontName';
}
(.classname선택기입니다.).
특정 글꼴 검색이 모든 브라우저에서 작동하지는 않습니다. fontsquirrel.com 의 생성기를 사용하여 변환 작업을 너무 많이 하지 않도록 할 수 있습니다.
Google 글꼴에서 제공하는 무료 웹 글꼴 세트를 찾을 수 있습니다(자동 생성 CSS도 있음).@font-face규칙을 작성할 필요가 없습니다.)
또한 가능하면 사람들이 글꼴을 다운로드할 수 있는 자유로운 액세스 권한을 갖지 못하게 합니다.
아니요, CSS를 통해 내장된 사용자 정의 글꼴로 텍스트를 스타일화하는 것은 불가능하지만 사람들이 다운로드하는 것은 불가능합니다.이미지, 플래시 또는 HTML5 캔버스를 사용해야 하는데, 모두 실용적이지 않습니다.
글꼴이 브라우저 간에 호환되는지 확인하려면 다음 구문을 사용해야 합니다.
@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에 로딩해야 합니다.
F.e. 웹 애플리케이션에서 야노네 카페사츠 글꼴을 사용하고 있습니다.
로드하여 사용합니다.
@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 에서 마음에 드는 글꼴을 찾을 수 없는 경우 언제든지 만든 글꼴로 웹 글꼴을 만들 수 있습니다.
여기 좋은 튜토리얼이 있습니다.글꼴 얼굴 웹 글꼴 키트 만들기
다른 사람이 당신의 글꼴을 다운로드하는 것을 막는 것에 대해서는 확신할 수 없지만요.
이게 도움이 되길 바랍니다.
CUFON이라는 흥미로운 도구도 있습니다.이 블로그에서 사용법에 대한 시연이 있습니다. 정말 간단하고 흥미롭습니다.또한 생성된 콘텐츠를 ctrl+c/ctrl+v로 이동할 수 없습니다.
나는 Win 8에서 일하고 있으니 이 코드를 사용하세요.IE와 FF, 오페라 등에서 작동합니다.제가 이해한 것은: woff 글꼴은 구글 글꼴에서 가벼운 공통점입니다.
이전에 ttf 글꼴을 woff로 변환하려면 여기로 이동하십시오.
@font-face
{
font-family:'Open Sans';
src:url('OpenSans-Regular.woff');
}
우선 글꼴이 자신의 것이고 보통 몇 달이 걸리는 경우를 제외하고는 사람들이 글꼴을 다운로드하는 것을 막을 수 없습니다.그리고 사람들이 글꼴을 사용하지 못하게 하는 것은 말이 안 됩니다.웹 사이트에서 볼 수 있는 많은 글꼴은 아래에서 언급한 것과 같은 무료 플랫폼에서 찾을 수 있습니다.
그러나 웹 사이트에 글꼴을 구현하려면 다음을 읽어 보십시오.웹 사이트에 글꼴을 구현하는 매우 간단하고 자유로운 방법이 있습니다.구글 폰트는 무료이고 사용하기 쉽기 때문에 추천합니다.예를 들어, 저는 구글의 뱅거스 글꼴을 사용할 것입니다.(https://fonts.google.com/specimen/Bangers?query=bangers&sidebar.open&selection.family=Bangers)HTML은 이렇게 보입니다.
<head>
<link href="https://fonts.googleapis.com/css2?family=Bangers&display=swap" rel="stylesheet">
</head>
CSS
body {
font-family: 'Bangers', cursive;
}
언급URL : https://stackoverflow.com/questions/12144000/using-custom-fonts-using-css
'programing' 카테고리의 다른 글
| 웹 사이트에서 IE9이 호환 모드로 전환되는 이유는 무엇입니까? (0) | 2023.08.24 |
|---|---|
| IE에서 .change()를 인식하도록 jQuery를 가져오는 중 (0) | 2023.08.24 |
| 노드에서 setTimeout은 어떻게 작동합니까?JS? (0) | 2023.08.24 |
| Android 명령줄 도구 sdkmanager에 항상 표시됨: 경고: 설정을 만들 수 없음 (0) | 2023.08.24 |
| MySQL PHP - SELECT WHERE ID = array()? (0) | 2023.08.24 |