Google 웹폰트 사용

Google 웹폰트 사용

다음과 같은 라이센스를 고려하십시오.

사용자가 설치하지 않고도 웹사이트에서 Ubuntu 글꼴 모음을 어떻게 사용할 수 있나요?
다음과 같은 도구와 함께 사용할 수 있습니다.http://code.google.com/intl/en-US/apis/webfonts/

답변1

웹사이트에 Ubuntu 글꼴을 삽입할 수 있는 두 가지 방법이 있습니다. Google 글꼴 디렉토리(권장)를 사용하거나 CSS @font-face선언을 사용하고 글꼴을 수동으로 변환하는 것입니다.

Google 웹폰트 사용

이제 Ubuntu 글꼴을 Google 웹 글꼴로 사용할 수 있습니다. 이렇게 하면 프로세스가 훨씬 간단해집니다. 답변의 이 부분의 내용 대부분은 다음에서 비롯됩니다.슬라덴의 대답.

Google Font API를 사용하는 것이 선호되는 방법인 이유는 무엇입니까?

Google Font API를 사용하면 세부 사항에 대해 걱정할 필요 없이 웹 글꼴이 모든 최신 브라우저에서 자동으로 작동할 수 있으므로 훌륭한 제안입니다. 글꼴 API를 사용한다는 것은 방문자가 항상최신자동으로 서체 버전을 변경합니다.

Google 글꼴 API를 어떻게 사용할 수 있나요?

2010년 12월 21일부터 Ubuntu 글꼴 모음이 포함되어 Google Font API에서 배포할 수 있습니다. 다음 사이트를 방문하세요.

당신은 읽을 수있다Google 웹 글꼴 게시뉴스에 대해 다음과 같이 설명합니다.

  1. Google 글꼴 디렉토리를 엽니다: "우분투 - 이 글꼴을 사용하세요" 페이지

  2. 다음의 조합을 선택하세요.가중치와 스타일웹 페이지에 필요한 일반, 기울임꼴, 굵게 및 굵은 기울임꼴 중 하나입니다.

    대체 텍스트

  3. 기본값이 올바르지 않은 경우 다음을 선택하십시오.언어/스크립트 조합필요한 사항: 영어 예제가 있는 러시아어 웹사이트에서는 "Cyrillic,Latin"을 사용할 수 있습니다.

    대체 텍스트

  4. HTML 페이지 또는 템플릿 사이에 지정된 <link>태그를 추가 하고 .<head> ... </head><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입니다. 현재 표시된 168kB 수치는 단일 웹 글꼴 다운로드로서 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');
}

Ubuntu Bold의 경우에도 유사합니다.

 @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;
}

이는 모두가 지원합니다.최근 브라우저.

고려사항

일부 사용자는 특정 글꼴 세트를 사용하도록 브라우저를 설정하고 사용자 정의 글꼴을 사용하는 경우 짜증을 낼 수 있다는 점을 기억하십시오. 또한 다음 내용을 읽어보세요.우분투 글꼴 라이센스글꼴 배포 방법에 대한 정확한 용어는 다음과 같습니다.

답변2

Google Font API를 사용하면 세부 사항에 대해 걱정할 필요 없이 웹 글꼴이 모든 최신 브라우저에서 자동으로 작동할 수 있으므로 훌륭한 제안입니다. 글꼴 API를 사용한다는 것은 방문자가 항상최신자동으로 서체 버전을 변경합니다.

2010년 12월 21일부터 Ubuntu 글꼴 모음이 포함되어 Google Font API에서 배포할 수 있습니다. 다음 사이트를 방문하세요.

당신은 읽을 수있다Google 웹 글꼴 게시뉴스에 대해 다음과 같이 설명합니다.

  1. Google 글꼴 디렉토리를 엽니다: "우분투 - 이 글꼴을 사용하세요" 페이지
  2. 다음의 조합을 선택하세요.가중치와 스타일웹 페이지에 필요한 일반, 기울임꼴, 굵게 및 굵은 기울임꼴 중 하나입니다.
  3. 기본값이 올바르지 않은 경우 다음을 선택하십시오.언어/스크립트 조합필요한 사항: 영어 예제가 있는 러시아어 웹사이트에서는 "Cyrillic,Latin"을 사용할 수 있습니다.
  4. 복사해서 붙여넣으세요CSS 두 줄HTML 페이지나 템플릿의 <head> ... </head>및 섹션 에 추가하세요 .<style>...</style>

노트:

"라틴어"는스크립트영어와 기타 많은 유럽 및 아프리카 언어가 작성되었습니다.

"하위 설정"은 특정 언어에 대한 문자만 전송하여 글꼴 파일을 최적화하며 글꼴은 각각 약 44kB입니다. 현재 표시된 168kB 수치는 단일 웹 글꼴 다운로드로서 1,200개 이상의 글리프 모두에 대한 것이며 대부분은 단일 웹 사이트에 필요하지 않습니다.

Ubuntu 글꼴 파일은 다양한 브라우저에 맞는 형식으로 자동 변환됩니다. 제조사와 버전에 따라 필요한 형식은 WOFF, EOT또는 SVG입니다 TTF. CSS의 올바른 조합은 각 페이지 요청에 따라 다르며 이 어려운 문제를 마법처럼 해결합니다.

답변3

서버 측 글꼴 렌더링(더 나은 "동적 글꼴 렌더링")은 꽤 오랫동안 흥미로운 문제였습니다.

기술적으로, 컴퓨터가 특정 글꼴을 표시하려면 해당 글꼴이 이미 로컬에 설치되어 있어야 한다는 것이 논리적인 것 같습니다.

반면에 웹 디자인은 기본/잘 알려진 '웹 글꼴'을 고수해야 하므로 많은 것을 잃습니다.

CSS2.1은 다음을 사용하여 몇 가지 개선을 이루었습니다.@글꼴-얼굴규칙선언.
아직 표준이 되지는 않았지만 결국에는 CSS3가 표준이 될 것입니다.

그 외에도 다음과 같은 몇 가지 대체 방법이 있습니다.

제공된 링크를 통해 수행할 수 있는 작업에 대한 더 나은 아이디어를 얻을 수 있기를 바랍니다. ;-)

관련 정보