사이트에서 사용자 정의 글꼴을 사용하는 일부 새로운 웹 사이트 (일반 Arial, Tahoma 등 제외)를 보았습니다.
그리고 많은 브라우저를 지원합니다.
어떻게합니까? 또한 가능한 경우 사람들이 글꼴을 무료로 다운로드 할 수 없도록합니다.
사이트에서 사용자 정의 글꼴을 사용하는 일부 새로운 웹 사이트 (일반 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은 합리적으로 새로운 모든 브라우저에서 작동하지만 올바른 형식을 가져야합니다. 그렇기 때문에 fontsquirrel.com 을 사용하여 변환 및 규칙 생성 프로세스를 자동화하는 것이 좋습니다 . 그리고 그렇습니다. Google Webfonts는 상업적 용도로 무료입니다 ( 자세한 내용은 링크 없음 ).
font-style:및 선언 font-weight:에서 @font-face표준을 위반하고 있습니까?
format('truetype')을 사용하려면 소스 URL과 ;.
글꼴 파일을 다운로드하여 CSS에로드해야합니다.
Fe 웹 응용 프로그램에서 Yanone Kaffeesatz 글꼴을 사용하고 있습니다.
나는 그것을 통해 그것을 사용한다
@font-face {
font-family: "Yanone Kaffeesatz";
src: url("../fonts/YanoneKaffeesatz-Regular.ttf");
}내 스타일 시트에.
오늘이 웹에서 사용중인 네 개의 글꼴 컨테이너 형식은 다음과 같습니다 EOT, TTF, WOFF,과WOFF2.
불행히도 다양한 선택에도 불구하고 모든 이전 브라우저와 새 브라우저에서 작동하는 단일 범용 형식은 없습니다.
웹 브라우저에서 모든 브라우저에서 동일한 글꼴을 사용하려면 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;
}#iefix될까요? 이 부분 font-family: 'besom'; !important은이 !important외부하다 ;?
Google.com/webfonts 또는 fontsquirrel.com에서 원하는 글꼴을 찾지 못한 경우 언제든지 사용자가 만든 글꼴로 자신 만의 웹 글꼴을 만들 수 있습니다.
여기에 좋은 튜토리얼이 있습니다 : 나만의 폰트 페이스 웹 폰트 키트 만들기
다른 사람이 귀하의 글꼴을 다운로드하지 못하도록 확실하지는 않지만.
도움이 되었기를 바랍니다,
우선, 글꼴이 자신의 글꼴이고 일반적으로 몇 달이 걸리지 않는 한 다른 사람들이 글꼴을 다운로드하지 못하도록 막을 수 없습니다. 사람들이 글꼴을 사용하지 못하게하는 것은 말이되지 않습니다. 웹 사이트에서 볼 수있는 많은 글꼴은 아래에서 언급 한 것과 같은 무료 플랫폼에서 찾을 수 있습니다.
그러나 웹 사이트에 글꼴을 구현하려면 다음을 읽으십시오. 웹 사이트에 글꼴을 구현하는 매우 간단하고 자유로운 방법이 있습니다. 무료이며 사용하기 쉽기 때문에 Google 글꼴을 추천합니다. 예를 들어 Google의 Bangers 글꼴을 사용하겠습니다. ( 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;
}
cufon