동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

programing

동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

lastmoon 2023. 9. 14. 23:25

동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

@font-face CSS 규칙에 대해 MDC 페이지를 보고 있는데, 한 가지가 나오지 않습니다.굵고 이탤릭체, 굵고 이탤릭체 + 이탤릭체 파일이 따로 있습니다.어떻게 하면 세 개의 파일을 모두 하나에 내장할 수 있습니까?@font-face규칙? 예를 들면 다음과 같은 것이 있습니다.

@font-face {
    font-family: "DejaVu Sans";
    src: url("./fonts/DejaVuSans.ttf") format("ttf");
}
strong {
    font-family: "DejaVu Sans";
    font-weight: bold;
}

브라우저는 굵게 사용할 글꼴을 알 수 없기 때문에(해당 파일이 DejaVuSansBold.ttf이기 때문에) 기본적으로 원하지 않는 글꼴로 설정됩니다.브라우저에 특정 글꼴에 대해 가지고 있는 다양한 변형을 어떻게 알 수 있습니까?

해결책은 여러 개를 추가하는 것처럼 보입니다.@font-face규칙, 예:

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}

그건 그렇고, 구글 크롬은 그것에 대해 모르는 것 같습니다.format("ttf")논쟁은 생략하고 싶을 겁니다

(이 답변은 CSS 2 사양에 맞는 답변입니다.CSS3는 쉼표로 구분된 목록이 아닌 하나의 글꼴 스타일만 허용합니다.)

CSS3부터는 사양이 변경되어 단 하나만 허용됩니다.font-style. 쉼표로 구분된 목록(CSS2 단위)은 다음과 같이 처리됩니다.normal이전(기본값) 항목을 덮어씁니다.이렇게 정의된 글꼴은 영구적으로 기울임꼴로 나타납니다.

@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans.ttf");
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Bold.ttf");
    font-weight: bold;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-Oblique.ttf");
    font-style: oblique;
}
@font-face {
    font-family: "DejaVu Sans";
    src: url("fonts/DejaVuSans-BoldOblique.ttf");
    font-weight: bold;
    font-style: oblique;
}

대부분의 경우 이탤릭체로 충분할 것이고 사용하고 고수할 것을 주의해서 정의하면 비스듬한 규칙이 필요하지 않을 것입니다.

글꼴 변형이 제대로 작동하려면 CSS에서 @font-face 순서를 반대로 해야 했습니다.

@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-BoldOblique.ttf");
    font-weight: bold;
    font-style: italic, oblique;
}   
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Oblique.ttf");
    font-style: italic, oblique;
}
@font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono-Bold.ttf");
    font-weight: bold;
}
 @font-face {
    font-family: "DejaVuMono";
    src: url("styles/DejaVuSansMono.ttf");
}

요즘 2017-12-17.폰트 속성 주문의 필요성에 대한 설명을 스펙에서 찾을 수 없습니다.그리고 크롬으로 테스트를 해보면 주문이 무엇이든 항상 작동합니다.

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  src: url('#{$fa-font-path}/fa-solid-900.eot');
  src: url('#{$fa-font-path}/fa-solid-900.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-solid-900.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-solid-900.woff') format('woff'),
  url('#{$fa-font-path}/fa-solid-900.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-solid-900.svg#fontawesome') format('svg');
}

@font-face {
  font-family: 'Font Awesome 5 Free';
  font-weight: 400;
  src: url('#{$fa-font-path}/fa-regular-400.eot');
  src: url('#{$fa-font-path}/fa-regular-400.eot?#iefix') format('embedded-opentype'),
  url('#{$fa-font-path}/fa-regular-400.woff2') format('woff2'),
  url('#{$fa-font-path}/fa-regular-400.woff') format('woff'),
  url('#{$fa-font-path}/fa-regular-400.ttf') format('truetype'),
  url('#{$fa-font-path}/fa-regular-400.svg#fontawesome') format('svg');
}

만약 당신이 구글 폰트를 사용한다면 나는 다음을 제안합니다.

글꼴을 로컬 호스트 또는 서버에서 실행하려면 파일을 다운로드해야 합니다.

다운로드 링크에서 ttf 패키지를 다운로드하는 대신 다음과 같은 라이브 링크를 사용합니다.

http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,300italic,400italic,600italic

브라우저에 URL을 붙여넣으면 첫번째 답변과 유사한 글꼴로 된 선언문이 표시됩니다.

제공된 URL을 열고 파일을 다운로드한 후 이름을 바꿉니다.

CSS에 있는 연결 해제 파일에 상대 경로가 포함된 업데이트된 글꼴-페이스 선언을 붙이면 완료됩니다.

/*
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
# dejavu sans
# +++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
*/
/*default version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans.ttf'); /* IE9 Compat Modes */
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'), /* Duplicated name with hyphen */
        url('dejavu/DejaVuSans.ttf') 
        format('truetype');
}
/*bold version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Bold.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Bold.ttf') 
        format('truetype');
    font-weight: bold;
}
/*italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-Oblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-Oblique.ttf') 
        format('truetype');
    font-style: italic;
}
/*bold italic version*/
@font-face {
    font-family: 'DejaVu Sans';
    src: url('dejavu/DejaVuSans-BoldOblique.ttf'); 
    src: 
        local('DejaVu Sans'),
        local('DejaVu-Sans'),
        url('dejavu/DejaVuSans-BoldOblique.ttf') 
        format('truetype');
    font-weight: bold;
    font-style: italic;
}

제 스타일에 이와 같은 커스텀 폰트를 추가했습니다.less.

@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-LightItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-LightItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Light.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Light.woff') format('woff'),
        url('/fonts/EuclidSquare-Light.otf') format('opentype');
    font-weight: 300;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-RegularItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-RegularItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-RegularItalic.otf') format('opentype');
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Regular.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Regular.woff') format('woff'),
        url('/fonts/EuclidSquare-Regular.otf') format('opentype');
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-MediumItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-MediumItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Medium.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Medium.woff') format('woff'),
        url('/fonts/EuclidSquare-Medium.otf') format('opentype');
    font-weight: 500;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-SemiboldItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-SemiboldItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-SemiboldItalic.otf') format('opentype');
    font-weight: 600;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Semibold.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Semibold.woff') format('woff'),
        url('/fonts/EuclidSquare-Semibold.otf') format('opentype');
    font-weight: 600;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-BoldItalic.woff2') format('woff2'),
        url('/fonts/EuclidSquare-BoldItalic.woff') format('woff'),
        url('/fonts/EuclidSquare-BoldItalic.otf') format('opentype');
    font-weight: bold;
    font-style: italic, oblique;
}
@font-face {
    font-family: EuclidSquare;
    src: url('/fonts/EuclidSquare-Bold.woff2') format('woff2'),
        url('/fonts/EuclidSquare-Bold.woff') format('woff'),
        url('/fonts/EuclidSquare-Bold.otf') format('opentype');
    font-weight: bold;
}

body {
    font-family: EuclidSquare, Lato, sans-serif;
}

Create React App에 대해서는 여기서 다른 SO 답변 보기

를 한 한 합니다.css파일을 직접 당신의 파일로 전송합니다.public/index.html:

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontName"; <---
  font-style: italic; <---
  font-weight: normal;
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

를 한 한 합니다.css번들링을 위해 Js를 통해 파일 생성:

@font-face {
  font-family: "FontName"; <---
  font-style: normal; <---
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName.ttf") format("truetype");
}
@font-face {
  font-family: "FontNameItalic"; <---
  font-style: normal; <----
  font-weight: normal; /* normal | 300 | 400 | 600 | bold | etc */
  src: url("path-to-assets/fonts/FontName-Italic.ttf") format("truetype");
}

만약 당신이 구글 폰트를 사용하고 있다면, 나는 다음을 사용할 것을 제안합니다.@import url("@import url('https://fonts.googleapis.com/css2?family=Saira+Condensed:wght@900&display=swap');")를 합니다.font-family: 'Saira Condensed', sans-serif;CSS 규칙 로서.

언급URL : https://stackoverflow.com/questions/2436749/how-to-add-multiple-font-files-for-the-same-font

'programing' 카테고리의 다른 글

여러 nginx 서버 블록을 구성할 수 없습니다. (0)	2023.09.14
Base64 문자열을 비트맵 이미지로 변환하여 이미지 보기에 표시하는 방법은 무엇입니까? (0)	2023.09.14
Windows Ubuntu의 python에 패턴 모듈을 설치할 수 없습니다. (0)	2023.09.14
C에서 캐스팅이 정수로 두 배 증가할 때 오버플로 처리 (0)	2023.09.14
Wocommerce Rest API : wocommerce_product_invalid_image_id (0)	2023.09.14

현재글동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

각종 프로그래밍 정보를 다루는 블로그입니다.

MariaDB, sql-server, Oracle, angularjs, PowerShell, git, ajax, CSS, Excel, spring, jquery, mongodb, json, spring-boot, ReactJS, Python, Android, C, asp.net, WordPress,

Today :
Yesterday :

일	월	화	수	목	금	토
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30	31

lastmoon

동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

'programing' 카테고리의 다른 글

'programing'의 다른글

티스토리툴바

동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

동일한 글꼴에 대해 여러 글꼴 파일을 추가하는 방법?

'programing' 카테고리의 다른 글

'programing'의 다른글

관련글

티스토리툴바