CSS는 font-family의 각 글꼴에 대해 font-size를 지정합니까?

Question

사용 된 글꼴이 너무 크면 (실제로는 너비가 너무 길 때) 내 기본 탐색 레이아웃이 잘못 이동합니다.

글꼴 패밀리의 첫 번째 글꼴은 특정 글꼴로 멋지지만 두 번째 글꼴 (처음 글꼴이 없으면 사용됨)이 너무 넓어서 레이아웃이 바뀝니다.

나는 글꼴이 너무 크므로 this similar quesiton을 찾았습니다. 대답은 높이를 기준으로하기 때문에 ex 단위를 사용하는 것이 었습니다.

너비에 사용할 수있는 장치가 있습니까? 아니면 font-family의 각 글꼴에 대해 글꼴 크기를 지정하는 방법이 있습니까?

Answer 1

대체 글꼴로 비슷한 글꼴을 제공하는 것이 좋습니다. 예를 들면 다음과 같습니다.

그런 식으로 대체 글꼴을 사용해도 레이아웃이 깨지지는 않습니다.

Answer 2

이상적으로는 x-small (extremeley small), small, medium, med-small, large, med-large, x-large 등과 같은 표준 클래스를 사용하고 다른 글꼴에 대해 이러한 클래스를 사용하는 것이 좋습니다. 크기. 정말로 큰 것을 원한다면 항상 <h1>, <h2> tags을 사용할 수 있습니다. 나는이 모든 것에 대한 표준으로 %를 사용할 것이다. 다양한 글꼴을 사용하면서, 사용 된 아래 클래스를 거의 손상시키지 않았습니다.

.body { 
    font-family: arial,helvetica,clean,sans-serif; 
} 
.x-small { 
    font-size: 77%; 
    letter-spacing: normal; 
} 
.small { 
    font-size: 85%; 
    letter-spacing: normal; 
} 
.med-small { 
    font-size: 92%; 
    letter-spacing: normal; 
} 
.medium { 
    font-size: 100%; 
    letter-spacing: normal; 
} 
.med-large { 
    font-size: 107%; 
    letter-spacing: normal; 
} 
.large { 
    font-size: 114%; 
    letter-spacing: normal; 
} 
.x-large { 
    font-size: 122%; 
    letter-spacing: normal; 
} 
.x2-large { 
    font-size: 131%; 
    letter-spacing: normal; 
} 
.x3-large { 
    font-size: 138.5%; 
    letter-spacing: normal; 
} 
.strong { 
    font-weight: bold; 
}