다음과 같은 라이센스를 고려하십시오.
사용자가 설치하지 않고도 Ubuntu 글꼴 모음을 모든 웹 사이트에서 어떻게 사용할 수 있습니까? http://code.google.com/intl/ko-KR/apis/webfonts/
와 같은 도구와 함께 사용할 가능성
모든 웹 페이지에 Ubuntu 글꼴 포함
답변:
웹 사이트에 Ubuntu 글꼴을 포함시킬 수있는 방법은 두 가지가 있습니다. Google Font Directory (선호)를 사용하거나 @font-faceCSS 선언을 사용하고 글꼴을 수동으로 변환합니다.
Google 웹 폰트 사용
이제 Ubuntu 글꼴을 Google 웹 글꼴로 사용할 수 있습니다. 이렇게하면 프로세스가 훨씬 간단 해집니다. 이 부분의 내용 대부분은 sladen 's answer 에서 온 것 입니다.
Google Font API를 선호하는 방법은 무엇입니까?
Google Font API를 사용하면 웹 폰트가 세부 사항에 대해 걱정할 필요없이 모든 최신 브라우저에서 자동으로 작동 할 수 있으므로 훌륭한 제안입니다. 글꼴 API를 사용하면 방문자는 항상 최신 버전의 서체를 자동으로 볼 수 있습니다.
Google Font API는 어떻게 사용합니까?
2010 년 12 월 21 일부터 Ubuntu Font Family가 Google Font API에 포함되어 배포 가능합니다.
뉴스에 대한 Google Web Font 게시물을 읽은 후 다음을 수행 할 수 있습니다 .
- Google 글꼴 디렉토리를 엽니 다. " Ubuntu-이 글꼴 사용 "페이지
웹 페이지에 필요한 Regular, Italic, Bold 및 Bold-Italic 중에서 가중치와 스타일 조합을 선택 하십시오.
기본값이 올바르지 않으면 필요한 언어 / 스크립트 조합 을 선택하십시오. 영어 예제가 포함 된 러시아어 웹 사이트는 "Cyrillic, Latin"을 사용할 수 있습니다.
HTML 페이지 또는 템플릿
<link>사이<head> ... </head>에 지정된 태그를 추가하고의 태그 사이 에 적절한 CSS 코드를 추가<style> ... </style>하십시오<head>.예를 들어 러시아어 / 영어 하이브리드 웹 사이트를 작성하고 모든 텍스트의 기본 글꼴을 사용하려는 경우
<head>태그 사이에 다음 코드를 추가 할 수 있습니다 .<link href='http://fonts.googleapis.com/css?family=Ubuntu&subset=cyrillic,latin' rel='stylesheet' type='text/css' /> <style type="text/css" > body { font-family : 'Ubuntu', sans-serif; } </style>
참고 사항 :
"라틴어"는 영어와 다른 많은 유럽 및 아프리카 언어로 작성된 스크립트 입니다.
"하위 설정"은 특정 언어의 문자 만 전송하여 글꼴 파일을 최적화합니다. 글꼴은 각각 약 44kB입니다. 현재 표시된 168 kB 수치는 단일 1,200 개 이상의 글리프를 단일 웹 글꼴 다운로드로 표시 한 것으로 단일 웹 사이트에는 필요하지 않습니다.
Ubuntu 글꼴 파일은 다른 브라우저에 맞는 올바른 형식으로 자동 변환됩니다. 제조업체와 버전에 따라 필요한 형식은 WOFF, EOT, SVG또는 TTF. CSS의 올바른 조합은 각 페이지 요청에 따라 다르며이 어려운 문제를 마술처럼 해결합니다.
@ font-face 사용
Ubuntu 글꼴 을 WOFF 글꼴 로 변환하여 포함시킬 수 있습니다 . 그런 다음 CSS @ font-face 선언을 사용하여 포함 할 수 있습니다. 글꼴 (.ttf 파일)은에서 찾을 수 있습니다 ./usr/share/fonts/truetype/ubuntu-font-family
예를 들어, WOFF 파일 Ubuntu-R.woff로 변환 된 Ubuntu Regular 글꼴을 사용하려면 다음 CSS 코드를 사용하십시오.
@font-face
{
font-family : "Ubuntu-R";
src: url('Ubuntu-R.woff');
}
우분투 볼드와 마찬가지로 :
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-B.woff');
font-weight : bold;
}
우분투 이탤릭체 :
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-I.woff');
font-style : italic;
}
우분투 굵은 이탤릭체 :
@font-face
{
font-family : "Ubuntu";
src: url('Ubuntu-BI.woff');
font-weight : bold;
font-style : italic;
}
이것은 모든 최신 브라우저에서 지원됩니다 .
고려 사항
일부 사용자는 브라우저에서 특정 글꼴 세트를 사용하도록 설정했으며 사용자 정의 글꼴을 사용하면 성 가실 수 있습니다. 또한 글꼴 배포 방법에 대한 정확한 용어 는 Ubuntu Font License 를 읽으십시오 .
@ DKuntz2-실제로 더 좋습니다. 나는 이제 내 대답을 바꿨다.
—
dv3500ea
sladen의 답변을 복사해야 할 필요성을 이해하지 못했습니다. 왜 그냥 편집하지 않습니까?
—
papukaija
@ font-face 메서드를 간략하게 설명하기 전에이 질문에 오랫동안 대답했습니다. 이것은 글꼴이 Google Font API에 추가되기 전이었습니다 (더 나은 방법입니다). 나는 대답의 시작 부분에 짧은 메모 만 추가하고 sladen은 훨씬 더 포괄적으로 대답했으며 Google 방법을 사용하는 데 더 나은 대답을했습니다.
—
dv3500ea
그러나 현재 내 대답은 받아 들여지고 크게 찬성되었고 사람들은 @ font-face 방법을 사용하는 것이 바람직하지 않다고 생각할 수있었습니다. sladen는 이에 대해 이메일을 통해 저에게 연락을했고이 사이트의 크리에이티브 커먼즈 라이센스에 필요한대로 속성을 제공하면서 답변을 변경하기로 동의했습니다.
—
dv3500ea
Google Font API를 사용하면 웹 폰트가 세부 사항에 대해 걱정할 필요없이 모든 최신 브라우저에서 자동으로 작동 할 수 있으므로 훌륭한 제안입니다. 글꼴 API를 사용하면 방문자는 항상 최신 버전의 서체를 자동으로 볼 수 있습니다.
2010 년 12 월 21 일부터 Ubuntu Font Family가 Google Font API에 포함되어 배포 가능합니다.
뉴스에 대한 Google Web Font 게시물을 읽은 후 다음을 수행 할 수 있습니다 .
- Google 글꼴 디렉토리를 엽니 다. " Ubuntu-이 글꼴 사용 "페이지
- 웹 페이지에 필요한 Regular, Italic, Bold 및 Bold-Italic 중에서 가중치와 스타일 조합을 선택 하십시오.
- 기본값이 올바르지 않으면 필요한 언어 / 스크립트 조합 을 선택하십시오. 영어 예제가 포함 된 러시아어 웹 사이트는 "Cyrillic, Latin"을 사용할 수 있습니다.
- 복사하여 붙여 넣기 CSS의 두 줄을 로
<head> ... </head>하고<style>...</style>HTML 페이지 또는 템플릿 섹션.
노트:
"라틴어"는 영어와 다른 많은 유럽 및 아프리카 언어로 작성된 스크립트 입니다.
"하위 설정"은 특정 언어의 문자 만 전송하여 글꼴 파일을 최적화합니다. 글꼴은 각각 약 44kB입니다. 현재 표시된 168 kB 수치는 단일 1,200 개 이상의 글리프를 단일 웹 글꼴 다운로드로 표시 한 것으로 단일 웹 사이트에는 필요하지 않습니다.
Ubuntu 글꼴 파일은 다른 브라우저에 맞는 올바른 형식으로 자동 변환됩니다. 제조업체와 버전에 따라 필요한 형식은 WOFF, EOT, SVG또는 TTF. CSS의 올바른 조합은 각 페이지 요청에 따라 다르며이 어려운 문제를 마술처럼 해결합니다.
서버 측 글꼴 렌더링 (더 나은 "동적 글꼴 렌더링")은 꽤 오랫동안 흥미로운 문제였습니다.
기술적으로 기계가 특정 글꼴을 표시하려면 로컬에 이미 설치되어 있어야합니다.
반면에 웹 디자인은 기본 / 잘 알려진 '웹 글꼴'을 고수해야하므로 많은 비용을 잃게됩니다.
CSS2.1은 @ font-face 규칙 선언 을 사용하여 일부 개선되었습니다 .
아직 표준은 아니지만 CSS3를 사용합니다.
그 외에도 다음과 같은 몇 가지 대체 방법이 있습니다.
제공된 링크가 수행 가능한 작업에 대한 더 나은 아이디어를 제공하기를 바랍니다. ;-)