2013-07-14 2 views
12

Chrome의 개발자 창에서 요소의 CSS 설정을 볼 수 있습니다.font-family가 상속됩니다. 크롬 개발자 패널에서 글꼴 패밀리를 찾는 방법은 무엇입니까?

enter image description here

는 최대한 멀리 볼 수있는, 모든 단일 font-family 값은 상속입니다.

글꼴 패밀리의 실제 가치는 무엇입니까? 그리고 어떻게 상속 계층 구조에서 나온 루트 폰트 값의 정의를 추적 할 수 있습니까?

+0

'html' 선택자의 속성이'상속인'이라면 설정에서 사용자 환경 설정을 사용한다는 것입니다. 값은 스타일 시트에 값을 명시 적으로 부여한 후에 만 ​​변경됩니다. 아니면 뭔가 다른 것을 의미 했습니까? –

답변

17

Developer Tools > Elements > Computed > Rendered Fonts

당신이 당신의 질문에 부착 된 사진이 Style 탭을 보여줍니다. 다음 탭 (Computed)으로 변경하면 렌더 된 실제 글꼴 군을 보여주는 렌더링 된 글꼴을 확인할 수 있습니다.

Developer Tools > Elements > Computed > Rendered Fonts

3

브라우저의 기본 글꼴 모음이이 경우 상속됩니다.

당신은 크롬의 브라우저의 기본 글꼴을 확인할 수 있습니다 사용할 경우 inherit value enter image description here

5

enter image description here이 의미 ... 글꼴을 사용자 정의> 설정> 웹 콘텐츠 그 값 속성은 부모 요소의 동일한 속성 값으로 설정됩니다. 루트 요소의 경우 (HTML 문서에서 html 요소의 경우) 부모 요소가 없습니다. 정의에 따르면 사용 된 값은 속성의 초기 값입니다. 초기 값은 CSS 사양의 각 속성에 대해 정의됩니다.

font-family property은 초기 값이 사양에 고정되어 있지 않지만 브라우저에 따라 다르다는 의미에서 특별합니다. 즉, 브라우저의 기본 글꼴 군이 사용됩니다. 이 값은 사용자가 설정할 수 있습니다.

루트 요소에서 현재 요소까지 연속적인 요소 체인 (부모 - 자식 관계라는 의미에서)이 모두 font-familyinherit으로 설정하거나 모든 스타일 시트에서 설정하지 않으면 상속), 글꼴은 브라우저 기본값입니다.

이것은 다소 흥미롭지 않습니다. 글꼴을 전혀 설정하지 않으면 브라우저 기본값이 사용됩니다. 귀하의 실제 문제는 다를 수 있습니다 - 당신은 브라우저 스타일 시트를 구성하는 스타일 시트의 부분을보고있는 것 같습니다. 상황에 영향을주는 다른 흥미로운 스타일 시트가있을 수 있습니다.

1

나는 영업 이익은 웹 페이지에 사용되는 글꼴이 무엇인지 알고 싶어 생각하고, 정보는 '검사'창에서 검색 가능이 될 수 있다는 희망했다.

Whatfont Chrome 확장 프로그램을 추가해보세요.

관련 문제