[html] CSS에서 여러 @ font-face 규칙 사용

Program / 글쓴이

@font-faceCSS에서 규칙 이상을 어떻게 사용할 수 있습니까?

내 스타일 시트에 삽입했습니다.

body {
    background: #fff url(../images/body-bg-corporate.gif) repeat-x;
    padding-bottom: 10px;
    font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

@font-face {
    font-family: 'GestaReFogular';
    src: url('gestareg-webfont.eot');
    src: local('☺'),
         url('gestareg-webfont.woff') format('woff'),
         url('gestareg-webfont.ttf') format('truetype'),
         url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

이것은 현재 사이트의 전체 텍스트에만 적용됩니다. 그러나 h1다른 글꼴을 사용 하도록 지정 하고 싶습니다 . 어떻게 할 수 있습니까?

답변

다음에 관심이있을 수도 있습니다.

IE9에서 작동하지 않는 사용자 지정 웹 글꼴

여기에는 아래에서 볼 수있는 CSS에 대한 자세한 설명이 포함되어 있습니다 (그리고 IE6-9에서 더 잘 작동하도록하는 조정 사항에 대해 설명합니다).

@font-face {
  font-family: 'Bumble Bee';
  src: url('bumblebee-webfont.eot');
  src: local('☺'),
       url('bumblebee-webfont.woff') format('woff'),
       url('bumblebee-webfont.ttf') format('truetype'),
       url('bumblebee-webfont.svg#webfontg8dbVmxj') format('svg');
}

@font-face {
  font-family: 'GestaReFogular';
  src: url('gestareg-webfont.eot');
  src: local('☺'),
       url('gestareg-webfont.woff') format('woff'),
       url('gestareg-webfont.ttf') format('truetype'),
       url('gestareg-webfont.svg#webfontg8dbVmxj') format('svg');
}

body {
  background: #fff url(../images/body-bg-corporate.gif) repeat-x;
  padding-bottom: 10px;
  font-family: 'GestaRegular', Arial, Helvetica, sans-serif;
}

h1 {
  font-family: "Bumble Bee", "Times New Roman", Georgia, Serif;
}

그리고 후속 질문 :

Q. 예를 들어 “Bumble bee”와 같은 글꼴을 사용하고 싶습니다. @font-face사용자 컴퓨터에서 해당 글꼴을 사용할 수 있도록 하려면 어떻게 해야합니까?

Bumble Bee 글꼴 또는 파일의 이름이 무엇인지 알 수 없으므로 적절하게 조정하고 위에 표시된 것처럼 font-face 선언이 사용 전에 (앞에) 있어야합니다.

Q. 다른 @font-face서체 “GestaRegular”도 사용할 수 있습니까 ? 같은 스타일 시트에서 둘 다 사용할 수 있습니까?

내 예에서 보여준 것처럼 함께 나열하십시오. 둘 다 선언 할 수없는 이유는 없습니다. 이 모든 @font-face수행은 다운로드 브라우저 지시하고 글꼴 – 가족이 사용할 수 있도록. 참조 : http://iliadraznin.com/2009/07/css3-font-face-multiple-weights

답변

@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Thin.otf);
    font-weight: 200;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Light.otf);
    font-weight: 300;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Regular.otf);
    font-weight: normal;
}
@font-face {
    font-family: Kaffeesatz;
    src: url(YanoneKaffeesatz-Bold.otf);
    font-weight: bold;
}
h3, h4, h5, h6 {
    font-size:2em;
    margin:0;
    padding:0;
    font-family:Kaffeesatz;
    font-weight:normal;
}
h6 { font-weight:200; }
h5 { font-weight:300; }
h4 { font-weight:normal; }
h3 { font-weight:bold; }

답변

@ font-face 규칙의 font-weight 및 src 속성을 변경하여 글꼴 패밀리의 여러 변형을 선언 할 수 있습니다.

/* Regular Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Regular.ttf");
}

/* SemiBold (600) Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-SemiBold.ttf");
    font-weight: 600;
}

/* Bold Weight */
@font-face {
    font-family: Montserrat;
    src: url("../fonts/Montserrat-Bold.ttf");
    font-weight: bold;
}

선언 된 규칙은 다음과 같이 사용할 수 있습니다.

/* Regular */
font-family: Montserrat;


/* Semi Bold */
font-family: Montserrat;
font-weght: 600;

/* Bold */
font-family: Montserrat;
font-weight: bold;

답변