운영 체제 또는 브라우저가 CSS Font-Family 이름 인 Case-Ensentitive

StackOverflow https://stackoverflow.com/questions/1602586

문제

에 따르면 sitepoint (나는 일반적으로 매우 신뢰합니다) 지정할 때 font-family 일부 운영 체제/브라우저의 이름을 지정합니다 5월 ~이다 사례에 민감합니다.

나는 일반적으로 항상 혼합 사례 값을 사용했지만 소문자 값이 동일하게 작동하는지 궁금합니다.

나는 어느 쪽이든 압도적 인 선호도가 없지만, 하단을 입력했기 때문에 페이지가 다르게 렌더링하는 것을 싫어합니다. "v" vs. "V" CSS 파일 어딘가에.

예를 들어 2 개의 div가 foo 그리고 bar 아래의 클래스는 실제로 다른 글꼴로 렌더링됩니까?

div.foo{
  font-family:Verdana, Arial, Helvetica;
}

div.bar{
  font-family:verdana, arial, helvetica;
}
도움이 되었습니까?

해결책

나의 추측 파일 시스템이 사례에 민감한 Linux/Unix 시스템에서는 잠재적 인 문제 일뿐입니다. 글꼴은 c : windows fonts 디렉토리의 파일이기 때문에 Windows 브라우저에 문제가 있으면 놀랄 것입니다.

택배와 같은 인식 가능한 글꼴로 테스트 텍스트가 포함 된 페이지를 만들 수 있지만 "Courier New"처럼 재미있게 주문한 다음 http://browsershots.org/ 수많은 브라우저에서 스크린 샷을 생성 할 수 있습니다. 스크린 샷이 작기 때문에 글꼴을 매우 크게 만들어야합니다.

이 같은:

<html>
<head>
<style type="text/css">
#proper   { font: bold 48px "Courier New",Courier; }
#improper { font: bold 48px "CoUrIEr nEW",CoUrIEr; }
</style>
</head>
<body>
<p id="proper">Test1 - proper caps</p>
<p id="improper">Test2 - improper caps</p>
</body>
</html>

만약에 단 하나 라인이 택배에 나타나면 브라우저는 대소 문자를 민감합니다.

편집하다: Browsershots에 위에 게시 한 HTML을 테스트했습니다. 작동하지 않는 브라우저를 찾지 못했습니다. Ubuntu Linux의 Dillo 2.1.1은 어느 라인을 좋아하지 않았을 것입니다 (아마도 시스템은 택배 새와 택배가 모두 부족했을 수도 있습니까?), 다른 모든 사람들은 택배 또는 택배에 두 줄을 모두 보여주었습니다. 그래도 테스트되지 않은 모바일 브라우저가 여전히 있으므로 만일을 대비하여 적절한 대문자를 사용하려고 노력해야합니다.

다른 팁

비록 CSS 구문 개요 말한다

다음 규칙은 항상 유지됩니다. 모든 CSS 스타일 시트는 CSS를 제어하지 않는 부품을 제외하고는 대소 문자를 사용하지 않습니다. 예를 들어, HTML 속성 "id"및 "class"의 값의 사례 감지 성 글꼴 이름, 및 우리 이 사양의 범위를 벗어납니다. 특히 요소 이름은 HTML에서는 대소 문자를 사용하지만 XML에서는 대소 문자를 사용합니다.

그만큼 CSS3-Fonts 모듈 섹션은 사례 감지 비교를 요구합니다.

다른 가족 이름의 경우 사용자 에이전트는 @font-face 규칙을 통해 정의 된 글꼴 중에서 가족 이름을 찾으려고 시도합니다. 사례에 민감한 비교.

따라서 CSS3 사양은 글꼴 이름을 사례 비면적으로 처리해야합니다.

이 사람은 Flex를 사용할 때 문제가있는 것 같습니다. 따라서 이것에 대한 진실이있는 것 같습니다.

Flex to 스타일 구성 요소에서 CSS를 사용하는 경우 글꼴 주식 속성은 일부 운영 체제에서 대소 문자를 민감 할 수 있습니다. 예를 들어, 다음 CSS는 Flash Player 10이있는 Safari 브라우저에서 작동하지 않습니다.

.content{font-family: arial;}

그러나 이것은 작동합니다 :

.content{font-family: Arial;}

원천

또한 자신의 브라우저/OS 에서이 페이지를 확인하는 데 사용할 수있는이 페이지를 살펴보십시오.

http://meyerweb.com/eric/css/tests/font-name-case-test.html

참으로 좋은 질문입니다. 나는 개인적으로 사례 민감도와 관련이있는 문제에 대해 듣지 못했습니다.

더 걱정해야 할 것은 다양한 시스템에서 이러한 글꼴이 존재하는 것입니다. Verdana와 Arial은 Mac에서 사용할 수 없습니다. Helvetica는 Windows에서 사용할 수 없습니다. WIN/MAC 차원에서 교차로 영역이 0 인 두 세트를 정의했습니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top