웹사이트에서 구글 로보토 글꼴을 사용하려면 어떻게 해야 합니까?
웹 사이트에서 Google의 Roboto 글꼴을 사용하고 싶고 이 자습서를 따르고 있습니다.
http://www.maketecheasier.com/use-google-roboto-font-everywhere/2012/03/15
다음과 같은 폴더 구조의 파일을 다운로드했습니다.
이제 세 가지 질문이 있습니다.
- 에 .
media/css/main.css. 그럼 폴더는 어디에 두어야 .까? - 하여 에서 allot,svg 요를 ?
fonts폴더? - css 파일 fonts.css를 만들고 기본 템플릿 파일에 포함해야 합니까?
그가 사용하는 예시는
@font-face {
font-family: 'Roboto';
src: url('Roboto-ThinItalic-webfont.eot');
src: url('Roboto-ThinItalic-webfont.eot?#iefix') format('embedded-opentype'),
url('Roboto-ThinItalic-webfont.woff') format('woff'),
url('Roboto-ThinItalic-webfont.ttf') format('truetype'),
url('Roboto-ThinItalic-webfont.svg#RobotoThinItalic') format('svg'); (under the Apache Software License).
font-weight: 200;
font-style: italic;
}
다음과 같은 dir 구조를 사용하려면 내 url을 어떻게 해야 합니까?
/media/fonts/roboto
당신은 이 일을 할 필요가 없습니다.
그 페이지는 당신에게 a를 줄 것입니다.<link>dfont-family CSS입니다.
구글의 글꼴을 이렇게 사용하면 가용성이 보장되고 서버에 대한 대역폭이 줄어듭니다.
페이지에서 라이센스가 부여된 웹 글꼴을 사용하기 위해 취할 수 있는 두 가지 방법은 다음과 같습니다.
1. Typekit, Fonts.com , Fontdeck 등과 같은 Font Hosting 서비스.
이러한 서비스는 설계자가 구입한 글꼴을 쉽게 관리할 수 있는 인터페이스를 제공하고 글꼴을 지원하는 동적 CSS 또는 자바스크립트 파일에 대한 링크를 생성합니다.Google은 이 서비스를 무료로 제공하기도 합니다(요청하신 로보토 폰트의 예시입니다).
Google 및 Typekit에서 사용되는 것과 같은 JS 폰트 로더(즉, WebFont 로더)는 발생할 수 있는 FOUT 또는 폰트를 다운로드할 때 응답 타임아웃을 관리하는 데 도움이 되는 CSS 클래스 및 콜백을 제공합니다.
<head>
<!-- get the required files from 3rd party sources -->
<link href='http://fonts.googleapis.com/css?family=Roboto' rel='stylesheet' type='text/css'>
<!-- use the font -->
<style>
body {
font-family: 'Roboto', sans-serif;
font-size: 48px;
}
</style>
</head>
2. DIY 접근법
여기에는 웹 사용을 위한 글꼴 라이센스를 얻고, FontSquirrel의 생성기(또는 일부 소프트웨어)와 같은 도구를 사용하여 파일 크기를 최적화하는 것이 포함됩니다.그런 구현.@font-faceCSS 속성은 글꼴을 활성화하는 데 사용됩니다.
이 방법을 사용하면 파일 크기를 포함할 문자를 보다 세밀하게 제어할 수 있으므로 로드 성능이 향상됩니다.
/* get the required local files */
@font-face {
font-family: 'Roboto';
src: url('roboto.eot'); /* IE9 Compat Modes */
src: url('roboto.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
url('roboto.woff') format('woff'), /* Modern Browsers */
url('roboto.ttf') format('truetype'), /* Safari, Android, iOS */
url('roboto.svg#svgFontName') format('svg'); /* Legacy iOS */
}
/* use the font */
body {
font-family: 'Roboto', sans-serif;
font-size: 48px;
}
TLDR;
웹 사이트에 사용자 지정 글꼴을 내장하는 방법은 크게 두 가지입니다.@font-face 선언과 함께 폰트 호스팅 서비스를 사용하면 전반적인 성능, 호환성 및 가용성 측면에서 최상의 결과를 얻을 수 있습니다.
출처 : https://www.artzstudio.com/2012/02/web-font-performance-weighing-fontface-options-and-alternatives/
갱신하다
Roboto: Google의 시그니처 글꼴이 이제 오픈 소스가 되었습니다.이제 여기에 나와 있는 지침을 사용하여 Roboto 글꼴을 수동으로 생성할 수 있습니다.
오래된 곳이죠, 알아요.
이것은 CSS를 사용해서도 가능합니다. @import url:
@import url(http://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900italic,900);
html, body, html * {
font-family: 'Roboto', sans-serif;
}
CSS 사용 시:
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}
/* etc, etc. */
새스:
@font-face
font-family: 'Roboto'
src: local('Roboto'), local('Roboto-Regular'), url('../fonts/Roboto-Regular.ttf') format('truetype')
font-weight: normal
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto Bold'), local('Roboto-Bold'), url('../fonts/Roboto-Bold.ttf') format('truetype')
font-weight: bold
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto Italic'), local('Roboto-Italic'), url('../fonts/Roboto-Italic.ttf') format('truetype')
font-weight: normal
font-style: italic
@font-face
font-family: 'Roboto'
src: local('Roboto BoldItalic'), local('Roboto-BoldItalic'), url('../fonts/Roboto-BoldItalic.ttf') format('truetype')
font-weight: bold
font-style: italic
@font-face
font-family: 'Roboto'
src: local('Roboto Light'), local('Roboto-Light'), url('../fonts/Roboto-Light.ttf') format('truetype')
font-weight: 300
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto LightItalic'), local('Roboto-LightItalic'), url('../fonts/Roboto-LightItalic.ttf') format('truetype')
font-weight: 300
font-style: italic
@font-face
font-family: 'Roboto'
src: local('Roboto Medium'), local('Roboto-Medium'), url('../fonts/Roboto-Medium.ttf') format('truetype')
font-weight: 500
font-style: normal
@font-face
font-family: 'Roboto'
src: local('Roboto MediumItalic'), local('Roboto-MediumItalic'), url('../fonts/Roboto-MediumItalic.ttf') format('truetype')
font-weight: 500
font-style: italic
/* Roboto-Regular.ttf 400 */
/* Roboto-Bold.ttf 700 */
/* Roboto-Italic.ttf 400 */
/* Roboto-BoldItalic.ttf 700 */
/* Roboto-Medium.ttf 500 */
/* Roboto-MediumItalic.ttf 500 */
/* Roboto-Light.ttf 300 */
/* Roboto-LightItalic.ttf 300 */
/* https://fonts.google.com/specimen/Roboto#standard-styles */
웹사이트의 경우 '로보토' 글꼴을 아래와 같이 사용할 수 있습니다.
별도의 css 파일을 작성한 경우 cs 파일 상단의 아래 줄을 다음과 같이 입력합니다.
@import url('https://fonts.googleapis.com/css?family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
합니다 위합니다.<style>...</style>:
<style>
@import url('https://fonts.googleapis.com/css?
family=Roboto:300,300i,400,400i,500,500i,700,700i,900,900i');
</style>
다음:
html, body {
font-family: 'Roboto', sans-serif;
}
src할 수 있습니다./media/fonts/roboto다. css다.src: url('../fonts/roboto/Roboto-ThinItalic-webfont.eot');
..즉,데,입니다.medias가. css이가)다./media/css폴더.
를 .../fonts/roboto/이 이 에 있고 CSS에서 url오든)와 하위 하십시오).roboto_black_macroman).
기본적으로 (질문에 대한 답변):
media/css/main.css URL에 CSS가 있습니다.그럼 그 폴더는 어디에 두어야 합니까?
, 하세요를 꼭하세요.src: url('../fonts/roboto/
모든 하위 폴더에서 allot,svg 등을 추출하고 글꼴 폴더를 넣어야 합니까?
CSS 코드에 하위 디렉터리를 배치하지 않고 해당 파일을 직접 참조하려면, 예.
css 파일 fonts.css를 만들고 기본 템플릿 파일에 포함해야 합니까?
꼭 그런 것은 아니지만 메인.css에 그 코드를 포함시키면 됩니다.하지만 맞춤형 CSS에서 글꼴을 분리하는 것이 좋습니다.
사용하는 글꼴 LESS/CSS 파일의 예는 다음과 같습니다.
@ttf: format('truetype');
@font-face {
font-family: 'msb';
src: url('../font/msb.ttf') @ttf;
}
.msb {font-family: 'msb';}
@font-face {
font-family: 'Roboto';
src: url('../font/Roboto-Regular.ttf') @ttf;
}
.rb {font-family: 'Roboto';}
@font-face {
font-family: 'Roboto Black';
src: url('../font/Roboto-Black.ttf') @ttf;
}
.rbB {font-family: 'Roboto Black';}
@font-face {
font-family: 'Roboto Light';
src: url('../font/Roboto-Light.ttf') @ttf;
}
.rbL {font-family: 'Roboto Light';}
하고 있습니다 (ttf 합니다를 에서는합니다.)는을 .@import "fonts";내 메인.less 파일에서 (less는 CSS 전처리기로, 이런 것들을 조금 더 쉽게 만듭니다.)
CDN을 사용하지 않고 정적인 배포를 위해 원하는 woff2 파일을 얻기 위해 수행한 작업입니다.
일시적으로 cs에 대한 cdn을 추가하여 roboto 글꼴을 index.html에 로드하고 페이지를 로드합니다.Google 개발 도구에서 소스를 보고 fonts.googleapis.com 노드를 확장하여 css?family=Roboto:300,400,500&display= swap 파일의 내용을 보고 내용을 복사합니다.이 내용을 자산 디렉토리의 CSS 파일에 넣습니다.
css 파일에서 그리스, crylic, 베트남 물건을 모두 제거합니다.
이 CSS 파일의 행 중 다음과 유사한 것을 보십시오.
src: local('Roboto Light'), local('Roboto-Light'), url(https://fonts.gstatic.com/s/roboto/v20/KFOlCnqEu92Fr1MmSU5fBBc4.woff2) format('woff2');
링크 주소를 복사하여 브라우저에 붙여넣으면 글꼴이 다운로드됩니다.이 글꼴을 자산 폴더에 넣고 CSS 파일뿐만 아니라 여기서도 이름을 변경합니다.다른 링크들도 이렇게 해주세요, 저는 6개의 독특한 woff2 파일을 가지고 있었습니다.
저는 재료 아이콘에 대해서도 같은 절차를 밟았습니다.
이제 돌아가서 당신이 cdn을 호출한 줄에 댓글을 달고 대신 당신이 만든 새로운 css 파일을 사용하세요.
/* -- Roboto-Family -- */
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Thin.woff') format('woff'), url('./fonts/Roboto/Roboto-Thin.ttf') format('truetype');
font-weight: 100;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-ThinItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-ThinItalic.ttf') format('truetype');
font-weight: 100;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Light.woff') format('woff'), url('./fonts/Roboto/Roboto-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Regular.woff') format('woff'), url('./fonts/Roboto/Roboto-Regular.ttf') format('truetype');
font-weight: 400;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Italic.woff') format('woff'), url('./fonts/Roboto/Roboto-Italic.ttf') format('truetype');
font-weight: 400;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Medium.woff') format('woff'), url('./fonts/Roboto/Roboto-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-MediumItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-MediumItalic.ttf') format('truetype');
font-weight: 500;
font-style: italic;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Bold.woff') format('woff'), url('./fonts/Roboto/Roboto-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-Black.woff') format('woff'), url('./fonts/Roboto/Roboto-Black.ttf') format('truetype');
font-weight: 900;
font-style: normal;
}
@font-face {
font-family: 'Roboto';
src: url('./fonts/Roboto/Roboto-BlackItalic.woff') format('woff'), url('./fonts/Roboto/Roboto-BlackItalic.ttf') format('truetype');
font-weight: 900;
font-style: italic;
}
/* -- Roboto-Condensed-Family -- */
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-Bold.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-BoldItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-BoldItalic.ttf') format('truetype');
font-weight: 700;
font-style: italic;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-Light.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-Light.ttf') format('truetype');
font-weight: 300;
font-style: normal;
}
@font-face {
font-family: 'Roboto Condensed';
src: url('./fonts/Roboto/RobotoCondensed-LightItalic.woff') format('woff'), url('./fonts/Roboto/RobotoCondensed-LightItalic.ttf') format('truetype');
font-weight: 300;
font-style: italic;
}
이거 먹어봐요.
<style>
@font-face {
font-family: Roboto Bold Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Bold.ttf);
}
@font-face {
font-family:Roboto Condensed;
src: url(fonts/Roboto_Condensed/RobotoCondensed-Regular.tff);
}
div1{
font-family:Roboto Bold Condensed;
}
div2{
font-family:Roboto Condensed;
}
</style>
<div id='div1' >This is Sample text</div>
<div id='div2' >This is Sample text</div>
CSS 스타일시트의 글꼴 유형 이름 앞에 /fonts/ 또는 /font/를 사용합니다.저는 이 오류가 발생했지만, 그 이후에는 정상적으로 작동합니다.
@font-face {
font-family: 'robotoregular';
src: url('../fonts/Roboto-Regular-webfont.eot');
src: url('../fonts/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('../fonts/Roboto-Regular-webfont.woff') format('woff'),
url('../fonts/Roboto-Regular-webfont.ttf') format('truetype'),
url('../fonts/Roboto-Regular-webfont.svg#robotoregular') format('svg');
font-weight: normal;
font-style: normal;
}
쉬워요
다운로드 받은 폴더마다 로보토 글꼴의 종류가 다릅니다. 즉, 다른 글꼴임을 의미합니다.
예제: "roboto_regular_macroman"
다음 중 하나를 사용합니다.
1 - 사용할 글꼴의 폴더를 추출합니다.
2- css 파일 근처에 업로드하기
3- 이제 CSS 파일에 포함합니다.
"roboto_regular_macroman"이라고 불리는 글꼴을 포함하는 예:
@font-face {
font-family: 'Roboto';
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot');
src: url('roboto_regular_macroman/Roboto-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('roboto_regular_macroman/Roboto-Regular-webfont.woff') format('woff'),
url('roboto_regular_macroman/Roboto-Regular-webfont.ttf') format('truetype'),
url('roboto_regular_macroman/Roboto-Regular-webfont.svg#RobotoRegular') format('svg');
font-weight: normal;
font-style: normal;
}
파일의 경로를 확인합니다. 여기서 저는 CSS가 있는 폴더와 동일한 폴더에 "roboto_regular_macroman"이라는 폴더를 업로드했습니다.
그러면 이제 단순히 글꼴을 입력하여 사용할 수 있습니다.font-family: 'Roboto';
사실 꽤 간단합니다.Google 웹 사이트의 글꼴로 이동하여 글꼴을 포함할 모든 페이지의 맨 앞에 해당 연결을 추가합니다.
해당 zip 파일에 있는 How_To_Use_Webfonts.html 읽어보셨나요?
이를 읽고 나면 각 글꼴 하위 폴더에는 다음을 포함하여 사용할 수 있는 .css가 이미 만들어진 것으로 보입니다.
<link rel="stylesheet" href="stylesheet.css" type="text/css" charset="utf-8" />
글꼴 문제를 해결하는 데 한 시간이 걸렸습니다.
관련 답변 - 아래는 다음에 대한 내용입니다.React.js웹사이트:
npm 모듈을 장착합니다.
npm install --save typeface-roboto-mono사용할 .js 파일로 가져오기
다음 중 하나:import "typeface-roboto-mono";// 가져오기가 지원되는 경우
require('typeface-roboto-mono')// 가져오기가 지원되지 않는 경우사용할 수 있는 요소는
다음 중 하나:fontFamily: "Roboto Mono, Menlo, Monaco, Courier, monospace", // material-ui
font-family: Roboto Mono, Menlo, Monaco, Courier, monospace; /* css */
style="font-family:Roboto Mono, Menlo, Monaco, Courier, monospace;font-weight:300;" /*inline css*/
도움이 되길 바랍니다.
언급URL : https://stackoverflow.com/questions/18178867/how-can-i-use-googles-roboto-font-on-a-website
'programing' 카테고리의 다른 글
| WooCommerce에서 "Uncatched Error: Call to member function get_tax_class() on null"을 수정하는 방법? (0) | 2023.10.06 |
|---|---|
| strcmp 빈 문자열 (0) | 2023.10.06 |
| gcc warning: 스칼라 이니셜라이저 주위에 대괄호가 있음 (0) | 2023.10.01 |
| 'on clause'에 알 수 없는 열(열 별칭이 오류를 일으키는 것 같습니다.) (0) | 2023.10.01 |
| AngularJS : 필터를 비동기적으로 초기화합니다. (0) | 2023.10.01 |