프로젝트에 새 글꼴을 가져오는 방법 - Angular 5

프로젝트에 새 글꼴을 가져오는 방법 - Angular 5

Angular 5 프로젝트에 새로운 글꼴을 가져오기를 원합니다.

시도해 본 결과:

1) 파일을 asset/fonts/에 복사하는 중

2) 에 추가하기.angular-cli.json스타일들

하지만 나는 그 파일이 a가 아닌 것을 확인했습니다..css, 그것은.otf그것은 아주 잘 작동합니다..exe(설치자입니다) 그래서 어떻게 가져오는지 잘 모르겠습니다.감 잡히는 게 없어요?

글꼴 파일을 자산 폴더(자산 내 글꼴 하위 폴더일 수 있음)에 넣고 스타일을 참조해야 합니다.

@font-face {
  font-family: lato;
  src: url(assets/font/Lato.otf) format("opentype");
}

작업이 완료되면 이 글꼴을 다음과 같이 원하는 곳에 적용할 수 있습니다.

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'lato', 'arial', sans-serif;
}

당신은 그것을 넣으셔도 됩니다.@font-face글로벌에서의 정의styles.css아니면styles.scss그리고 당신은 어디서든 폰트를 참조할 수 있을 것입니다 - 심지어 당신의 구성요소에 특정한 CSS/SCSS에서도 말입니다.styles.css아니면styles.scss에 이미 정의되어 있습니다.angular-cli.json. 또는 원한다면 별도의 CSS/SCSS 파일을 만들어 angular-cli.json와 함께 선언할 수 있습니다.styles.css아니면styles.scss예:

"styles": [
  "styles.css",
  "fonts.css"
],

글꼴을 사용하여 글꼴에 대한 CSS를 만들 수 있습니다(여기서 설명된 것처럼).

1단계

폰트 페이스로 CSS 파일을 만들어 에 있는 것처럼 어딘가에 놓습니다.assets/fonts

customFont.css

@font-face {
    font-family: YourFontFamily;
    src: url("/assets/font/yourFont.otf") format("truetype");
}

2단계

CSS를 당신의 것에 추가합니다..angular-cli.json(또는.angular.json각 6+)의 경우styles구성

"styles":[
 //...your other styles
 "assets/fonts/customFont.css"
 ]

다시 시작하는 것을 잊지 마십시오.ng serve이렇게 하고 나서

3단계

코드의 글꼴 사용

성분.

span {font-family: YourFontFamily; }

답은 이미 위에 존재하지만, 저는 몇가지를 추가하고 싶습니다.@font페이스에서 다음을 지정할 수 있습니다.

@font-face {
  font-family: 'Name You Font';
  src: url('assets/font/xxyourfontxxx.eot');
  src: local('Cera Pro Medium'), local('CeraPro-Medium'),
  url('assets/font/xxyourfontxxx.eot?#iefix') format('embedded-opentype'),
  url('assets/font/xxyourfontxxx.woff') format('woff'),
  url('assets/font/xxyourfontxxx.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
}

따라서 이미 선택한 글꼴 패밀리 이름을 표시할 수 있습니다.

참고: 글꼴 무게 및 글꼴 스타일은 .woff .ttf ... 파일에 따라 달라집니다.

앵귤러를 쓰시면.

글꼴을 자산 폴더 어딘가에 넣어야 합니다.

앵글을 처음 접하는 많은 사람들이 다른 곳에 배치해야 하지만 앵글은 자산 폴더에 있는 파일을 중심으로 프롭을 구축하기 위해 많은 최적화 작업을 수행합니다.

자재 디자인을 사용하는 경우 style.scss 파일에서 다음 줄의 코드를 추가해야 합니다.

@import url("https://fonts.googleapis.com/css2?family=Saira:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap");

@import '~@angular/material/theming';
$typography: mat-typography-config(
  $font-family: 'Saira'
);

@include angular-material-typography($typography);

참고: 지구상에서 애플의 SF Pro Font를 실제로 좋아하는 사람은 저밖에 없다고 생각하기 때문에 위의 답변을 추천합니다. 하지만 저와 같은 경우(그리고 Mac에서 .otf/.ttf 파일을 검색하는 경우):

@삽타르시 바수의 대답은 나에게 딱 들어맞았습니다.SF Pro Font .otf(또는 .ttf) 파일을 찾고 있는 경우:

• 글꼴 책 응용프로그램 열기
• 프로젝트에 포함할 스크롤 가능 목록에서 글꼴 찾기
• 마우스 오른쪽 버튼 클릭 > 파인더에 표시
• (모두 또는 하나만) .otf(또는 .ttf) 파일을 자산 내부의 글꼴 폴더에 복사합니다(또는 프로젝트에서 원하는 곳에서). 그러나 10/10에서 글꼴 폴더를 생성하는 것이 좋습니다.

내 styles.scss 파일은 다음과 같습니다.

// Fonts
@font-face {
    font-family: SFPRO;
    src: url("assets/fonts/SF-Pro/SF-Pro-Text-Regular.otf"); 
    format: "opentype";
}

// CSS Reset
* { 
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: SFPRO
}

그리고 분명히 내 아이들 .scss 파일마다 "포함" (hehe):

@import '../../../../../styles.scss';

이 마지막 부분을 충분히 강조할 수 없습니다. @DAVID의 답변을 듣고 서브를 다시 시작할 수 있도록 하십시오. 이 부분에 대해서는 그(그리고 저)를 믿으십시오.

언급URL : https://stackoverflow.com/questions/49878988/how-to-import-a-new-font-into-a-project-angular-5