it-source

각진 재료 및 글꼴 변경

criticalcode 2023. 10. 23. 21:54
반응형

각진 재료 및 글꼴 변경

Angular Material에서 기본 글꼴을 변경할 수 있는 방법이 궁금합니다.

기본값은 Roboto인데 다른 글꼴로 변경할 방법을 찾지 못했습니다.

의 CSS 범용 선택기()*를 사용할 수 있습니다.CSS아니면SCSS:

* {
  font-family: Raleway /* Replace with your custom font */, sans-serif !important; 
  /* Add !important to overwrite all elements */
}

각진 소재부터 시작v2.0.0-beta.7, 를 사용하여 타이포그래피 구성을 만들어 타이포그래피를 사용자 정의할 수 있습니다.mat-typography-config기능 및 이 구성을 에 포함합니다.angular-material-typography믹스인:

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

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

또는()v2.0.0-beta.10이상):

// NOTE: From `2.0.0-beta.10`, you can now pass the typography via the mat-core() mixin:
@import '~@angular/material/theming';
$custom-typography: mat-typography-config(
  $font-family: 'Raleway'
);
@include mat-core($custom-typography);

자세한 내용은 Angular Material의 타이포그래피 설명서를 참조하십시오.

참고: 글꼴을 적용하려면 다음을 추가합니다.mat-typography사용자 지정 글꼴을 적용해야 하는 상위 클래스:

<body class="mat-typography">
  <h1>Hello, world!</h1>
  <!-- ... -->
</body>

이 공식 가이드에서:

타이포그래피 커스터마이징은 Angular Material의 Sass 기반 테마의 확장입니다.사용자 지정 테마를 만드는 것과 마찬가지로 사용자 지정 타이포그래피 구성을 만들 수 있습니다.

그래서 이 대사를 당신의 것에 포함시키세요.index.html파일, 일부 외부 글꼴 링크:

<link href="https://fonts.googleapis.com/css?family=Oswald" rel="stylesheet">

그럼 당신의 것을 넣어보세요.styles.scss사용자 지정 타이포그래피 설정 파일, 선택한 글꼴에 대한 글꼴 패밀리 문자열 조정:

@import '~@angular/material/theming';

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat.core($custom-typography);

색상 등이 포함된 전체 사용자 지정 테마는 다음과 같습니다.

@import '~@angular/material/theming';

$custom-typography: mat-typography-config($font-family: '"Oswald", sans-serif;');
@include mat.core($custom-typography);

$custom-primary: mat.define-palette($mat-blue);
$custom-accent: mat.define-palette($mat-amber);
$custom-theme: mat.define-light-theme($custom-primary, $custom-accent);
@include mat.all-component-themes($custom-theme);

바로 그겁니다.

사용자 지정 타이포그래피에 대한 자세한 정보는 이 게시물에서 확인할 수 있습니다.

샘플에 사용된 글꼴은 Google 글꼴에서 가져온 것입니다.

업데이트:

@Nate May가 언급한 대로 v12와 함께 변경되었으니 사용자 지정 타이포그래피에 대한 현재 권장 사항에 대한 업데이트된 설명서를 확인하십시오.

이 작업 최신 각도 소재에 맞춤 테마 사용 시 (12)

style.scss

@use '~@angular/material' as mat;
@font-face {
   font-family: 'custom-font';
   src: url('assets/custom-font.ttf');
 }
$custom-typography: mat.define-typography-config(
  $font-family: "custom-font"
);
@include mat.core($custom-typography);

각도 15부터, 이전에 가장 많이 투표된 답은 더 이상 작동하지 않습니다.

1. 타이포그래피 관련

표시한 대로 정의할 수 있지만 글꼴을 변경할 때는 타이포그래피 크기를 변경해야 할 수도 있습니다.

이 작업을 수행하려면 다음과 같은 작업 예가 있습니다.

@use '@angular/material' as mat;
@include mat.core();

$typography-config: mat.define-typography-config(
  $font-family: '"Open Sans", "Helvetica Neue", sans-serif',
  $headline-1: mat.define-typography-level(112px, 112px, 300, $letter-spacing: -0.05em),
  $headline-2: mat.define-typography-level(56px, 56px, 400, $letter-spacing: -0.02em),
  $headline-3: mat.define-typography-level(45px, 48px, 400, $letter-spacing: -0.005em),
  $headline-4: mat.define-typography-level(34px, 40px, 400),
  $headline-5: mat.define-typography-level(24px, 32px, 400),
  $headline-6: mat.define-typography-level(20px, 32px, 400),
  $subtitle-1: mat.define-typography-level(16px, 28px, 400),
  $body-1: mat.define-typography-level(14px, 20px, 400),
  $body-2: mat.define-typography-level(14px, 20px, 400),
  $subtitle-2: mat.define-typography-level(16px, 28px, 400),
  $caption: mat.define-typography-level(12px, 20px, 400),
  $button: mat.define-typography-level(14px, 14px, 500),
);

테마 정의에 정의된 타이포그래피 구성을 추가하는 것도 잊지 마십시오.

$light-primary: mat.define-palette($light-primary-palette, 500);
$light-accent: mat.define-palette($light-accent-palette, 500);
$light-warn: mat.define-palette($light-warn-palette, 500);

$theme-light: mat.define-light-theme((
  color: (
    primary: $light-primary,
    accent: $light-accent,
    warn: $light-warn
  ),
  typography: $typography-config
));

$dark-primary: mat.define-palette($dark-primary-palette, 500);
$dark-accent: mat.define-palette($dark-accent-palette, 500);
$dark-warn: mat.define-palette($dark-warn-palette, 500);

$theme-dark: mat.define-dark-theme((
  color: (
    primary: $dark-primary,
    accent: $dark-accent,
    warn: $dark-warn
  ),
  typography: $typography-config
));

계층 구조를 적용하는 것도 잊지 마십시오.

@include mat.typography-hierarchy($typography-config);

2. 어두운 테마에 관하여

어두운 테마를 밝은 테마와 함께 정의하는 경우 다음을 사용하지 마십시오.

.theme-light {
    @include mat.all-component-themes($theme-light);
}

.theme-dark {
    @include mat.all-component-themes($theme-dark);
}

@include mat.typography-hierarchy($typography-config);

대신 다음을 사용합니다.

.theme-light {
    @include mat.all-component-themes($theme-light);
}

.theme-dark {
    @include mat.all-component-colors($theme-dark);
}

@include mat.typography-hierarchy($typography-config);

올바른 방법으로 실행하면 타이포그래피 정의 중복을 방지할 수 있습니다.

Angular Material 13에서 사용되지 않는 방법은 거의 없습니다.Angular Material에서 기본 글꼴 패밀리를 변경하려면 새 방법/구성이 아래와 같습니다.

  1. 먼저 글꼴의 CSS 링크를 변경합니다.index.html일.
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link
    href="https://fonts.googleapis.com/css2? family=Titillium+Web:wght@300;400;600;700&display=swap"
    rel="stylesheet"
>
  1. 구성 아래의 두 번째 쓰기(에서)styles.scss파일
$custom-typography: mat.define-typography-config($font-family:'"Titillium Web",sans-serif');

$custom-theme: mat.define-light-theme((typography: $custom-typography));

@include mat.core($custom-typography);
@include mat.all-component-themes($custom-theme);

각도 15에서.

    $my-typography: mat.define-typography-config($font-family: '"Open Sans", "Helvetica Neue", sans-serif');
    
    @include mat.typography-hierarchy($my-typography);

$my-app-theme: mat.define-light-theme((
  color: (
    primary: $my-app-primary,
    accent: $my-app-accent,
    warn: $my-app-warn,
  ),
  typography: $my-typography
));

다음을 쉽게 무시할 수 있습니다.mat-typography-config다양한 변수의 글꼴 유형과 값을 설정합니다.

.custom-typography {
  @include angular-material-typography($custom-typography);
}

$custom-typography: mat-typography-config(
  $font-family: "Quicksand, sans-serif",
);

데모가 있는 https://www.universal-tutorial.com/angular-tutorials/angular-typography 기사를 보세요.

언급URL : https://stackoverflow.com/questions/43747518/angular-material-and-changing-fonts

반응형

'it-source' 카테고리의 다른 글

jQuery Mobile:동적으로 추가되는 컨텐츠의 마크업 향상  (0) 2023.10.23
ui-view? angular ui 라우터를 다시 로드하지 않고 $stateParams를 업데이트하려면 어떻게 해야 합니까?  (0) 2023.10.23
억만장자 웃음 XML DoS 공격은 어떻게 작동합니까?  (0) 2023.10.23
gradle로 스프링 응용 프로그램 디버그하는 방법  (0) 2023.10.18
웹사이트용 워드프레스와 앵귤러 8을 통합하는 방법은?  (0) 2023.10.18

'it-source'의 다른글

  • 현재글각진 재료 및 글꼴 변경

관련글

댓글

티스토리툴바