사이트에서 사용되는 글꼴을 결정하는 유틸리티? [닫은]

9

예를 들어 : NYTimes 웹 사이트에서 사용되는 글꼴을 좋아 하므로 웹 사이트에서 사용하는 모든 글꼴을 나열 할 수있는 것이 좋습니다!

내가 할 NOT 찾는 이미지 처리 유틸리티 스크린 샷이나하는 사이트 분석 할 수있는 글꼴에 대한 질문을 하고 목록에서 좁힐 수 있습니다.

웹 사이트를 크롤링하고 글꼴을 나열 할 수있는 것 ... 지역의 글꼴을 오버레이 할 수 있으면 좋을 것입니다.하지만 너무 멀리 갈 것입니다.

software-rec  website  fonts 
— 레이저
소스
@Arjan why :-(? 나는 내가 찾지 않은 것을 명시 적으로 언급했는데, 그것은 대부분의 답변의 주제였습니다.
— Lazer
Firefox는 현재 단일 페이지에서이를 매우 쉽게 만들었습니다. 내 업데이트 된 답변을 참조하십시오 .
— Arjan

답변:

20

이를 달성하는 데는 여러 가지 방법이 있습니다. CSS가 작동하는 방식에 매우 관심이 있고 타이포그래피를 좋아 하기 때문에 실제로이 작업을 많이 수행합니다 . 이 작업을 좋아하는 두 가지 방법은 다음과 같습니다.

  • 브라우저에서 "검사기"사용하기 (이것은 당신이 찾고있는 것입니다!) - 내장 된 검사기 도구 가있는 Chrome을 사용합니다 (사랑하기 때문에) . 당신은 정말로 그것을 시도해야합니다. 사이트로 이동하여 분석하려는 요소를 마우스 오른쪽 버튼으로 클릭하고 상황에 맞는 메뉴에서 "요소 검사"를 클릭하면됩니다. Inspector 는 HTML 및 CSS의 동적 속성을 표시 하므로 텍스트 요소를 검사하는 경우 css 속성 이 표시 됩니다.font-family인스펙터 (오른쪽 막대에 있음)에서 글꼴이 무엇인지 알려줍니다 (이 CSS 해석 방법에 대한 자세한 내용은 아래 참조). Firefox 용 Firebug를 사용하여 비슷한 것을 수행 할 수는 있지만 Chrome 검사기 도구가 훨씬 우수하다고 생각합니다 (웹 개발자입니다-모든 용도로 사용합니다).

  • 또는 페이지 소스를 수동으로보고 CSS를 분석 할 수 있습니다. 방법은 다음과 같습니다.

    1. 페이지에있을 때 소스를보십시오. Internet Explorer를 사용하는 경우 페이지-> 소스보기 또는보기-> 소스로 이동하십시오. Firefox, Chrome 또는 다른 최신 브라우저를 사용하는 경우 Ctrl + U (또는 운영 체제에 따라 Apple + U)를 누르십시오.

    2. HTML 코드에서 분석하려는 텍스트 내용을 검색하십시오. 텍스트가 포함 된 일부 태그를 찾아야하며, 태그를 사용하거나 글꼴 또는 엔클로저 <font>의 style속성으로 HTML에 하드 코딩 된 글꼴 이 <p>있거나 <div>CSS를 참조 할 수 있습니다 ( class또는 id속성 찾기). 을 적어 두십시오).

    3. 후자의 경우 (일부 CSS 참조) HTML의 상단으로 이동 하여 페이지 <link>에서 태그를 찾으십시오 <head>. 링크가 스타일 시트를 참조하는 경우이를 볼 수 있습니다. 이제 CSS 스타일 시트로 이동하여 기록한 클래스 또는 ID 식별자를 검색하기 만하면됩니다. 어딘가에 해당 font-family속성 을 찾을 수 있습니다 (물론 사이트 전체에서 글꼴을 설정할 수도 있습니다. <body>태그 나 다른 이름 이있을 수 있습니다 . 따라서 이러한 어려움을 극복하기 위해 관리자 도구를 사용해야합니다. ).

font-familyCSS 를 해석하는 방법 :

font-family속성은 글꼴이 무엇인지를 결정합니다. 이 속성에서 글꼴은 쉼표로 구분 됩니다. 페이지를 렌더링 할 때 브라우저는 이 목록을 살펴보고 컴퓨터에있는 첫 번째 글꼴을 사용합니다 . 대부분의 경우이 속성의 끝에 글꼴 범주가 있습니다.이 범주는 다른 경우를 사용할 수없는 경우 해당 범주의 기본 글꼴이 사용되도록 "단지"입니다.

예 : 이것이 <p>인클로저의 CSS라고 가정 해 봅시다 .

p.thisisasampleclass
{
font-family: Calibri, "Comic Sans MS", Georgia, sans-serif;
}

글꼴이 사용 가능한 경우 브라우저는 먼저 Calibri를 사용하려고합니다. 그렇지 않은 경우 Comic Sans MS 또는 Georgia 또는 다른 글꼴을 사용할 수없는 경우 기본 sans-serif 글꼴 만 사용합니다.

사용중인 글꼴을 찾는 방법입니다. 나는 아주 좋은 방법으로 CSS를 시각화 어떤 잘 구축 및 유용한 도구를 발견하지 않은,하지만 난 검사기 옵션은 당신을 위해 작동 할 것이라고 생각한다 (이 아니에요 너무 혼란!). 나는 이것이 갈 길이라고 생각합니다.

인스펙터 도구로 NYTimes 글꼴을 찾는 방법의 예 :

Chrome 을 사용 하여 NYTimes 기사의 본문에 글꼴을 찾는 방법을 안내합니다 .

  1. NYTimes.com의 기사로 이동하여 글꼴을 찾으려는 텍스트 요소를 마우스 오른쪽 단추로 클릭 한 다음 요소 검사를 누르 십시오 .

    인스펙터 열기

  2. 오른쪽의 사이드 바를보십시오. 에서 계산 된 스타일 드롭 다운 ,이 요소의 CSS 속성을 볼 수 있습니다. 그러나 보시다시피 현재 여기에 글꼴 모음 속성이 없습니다. 즉,이 특정 요소뿐만 아니라 글꼴이 전체적으로 정의됩니다. 그러나이 문제를 해결할 수있는 방법이 있습니다!

    요소 속성보기

  3. 수행 한 작업 : "상속 표시"옆 의 단일 선택 단추를 선택하십시오 .

    상속 된 쇼를 선택하십시오

  4. "전산 스타일"아래에 다른 많은 전역 속성이 나타납니다.

    많은 글로벌 속성이 나타납니다

  5. 목록에서 아래 로 스크롤 하여 "font-family"로 이동하십시오. 회색으로 표시되어야합니다. 즉, 상속 된 전역 속성임을 의미합니다. 여기에서 사용 된 글꼴을 볼 수 있습니다! 타다!

    여기에 글꼴이 있습니다!

— 막심 자 슬라브스키
소스
지금 NYTimes에 대한 예제 설명을 추가하겠습니다.
— Maxim Zaslavsky
고맙습니다 ppl이 곳을 좋아합니다-www.superuser.com, 훨씬 더 :)
— Lazer
@ Maximz2005, 일부 선택의 경우 "컴퓨팅 스타일"드롭 다운이 표시되지 않습니다. 빈 스타일 드롭 다운이 나타납니다. 왜 그런 겁니까?
— Lazer
1
인스펙터가 실제로 WebKit 인스펙터이기 때문에 나중의 베타 버전에 더 최신 버전의 WebKit도 포함될 것이라고 생각합니까? 최신 버전은 물론 새로운 버그를 보여줄 수 있지만, 방금 버그가 발생했는지 궁금합니다. Chrome에서 사용되는 WebKit 버전을 표시하는 방법이 있습니까?
— Arjan
1
내 웹킷 532.0 @ 맥심 Z입니다. 나는 친구의 크롬 (버전 3.something)에서 시험해 보았습니다. 완벽하게 작동합니다. 마침내 원하는 방식으로 글꼴을 감지 할 수 있습니다. 이제 "요소 검사"기능이 얼마나 멋진 지 이해합니다.
— Lazer
7

두 가지 다른 점이 있습니다.

  1. 실제로 사용되는 글꼴 (브라우저 / 운영 체제에서)
  2. 웹 사이트 제작자가 요청한 글꼴

1. 실제로 사용되는 (대체) 글꼴

현재 컴퓨터와 운영 체제의 특정 브라우저에서 어떤 글꼴이 사용 되는지 확인하기 위해 Firefox와 Chrome에는 기본 제공 도구가 있습니다. Firefox 페이지 인스펙터처럼 폰트보기가 있습니다 :

Firefox 글꼴보기

자세한 내용 은 브라우저에서 실제로 텍스트를 렌더링하는 데 사용하는 글꼴을 어떻게 확인할 수 있습니까?를 참조하십시오. 스택 오버플로. 그것은 포함:

  • 텍스트에는 CSS에 정의 된 글꼴에없는 유니 코드 문자가 포함될 수 있으므로 단일 글꼴에 여러 글꼴을 사용할 수 있습니다.
  • 동일한 컴퓨터의 각 브라우저가 동일한 글꼴 유형 (예 : TrueType, Apple Advanced Technology, Microsoft OpenType, OpenType PostScript)을 사용할 수 없으므로 다른 글꼴을 사용할 수 있습니다. 따라서 다른 브라우저에서 사용되는 글꼴을 결정해야 할 수도 있습니다.

2. 어떤 글꼴이 요청 되었습니까

웹 사이트 제작자가 요청한 글꼴을 알려면 내장 Firefox 페이지 검사기 또는 Firebug 확장 프로그램 과 같은 도구를 사용 하여 CSS 규칙을 검사 할 수 있습니다. 이러한 도구는 실제로 어떤 글꼴이 사용 되는지 알려주지 않지만 CSS 스타일 시트를 사용하여 특정 지역 또는 특정 단어에 대해 어떤 글꼴이 요청 되는지 보여줍니다 .

Firebug의 CSS

위는 Firebug를 보여줍니다. 먼저 오른쪽의 스타일 메뉴에서 "계산 된 스타일 표시"를 선택하십시오. 그런 다음 왼쪽의 화살표 버튼을 클릭하십시오. 그런 다음 관심있는 텍스트를 클릭하십시오. 오른쪽의 CSS 스타일 시트 정보가 업데이트됩니다. CSS 기능 에 대해 배우 려면 기능 을 참조하십시오 .

일부 Firebug Lite 는 다른 브라우저에서도 사용할 수 있지만 사용하지는 않았습니다.

Safari의 Web Inspector 와 Chrome의 Developer Tools 에는 비슷한 옵션이 있습니다. (Safari의 경우 환경 설정 : 메뉴 표시 줄에 개발 메뉴 표시를 통해 Web Inspector를 활성화하십시오 .) Internet Explorer에는 F12 도구가 있습니다 .

전자 t172이 같이 언급 한 다음 웹 개발자 툴바를 파이어 폭스는이 정보를 표시 할 수 있습니다. 그러나 CSS»스타일 정보보기에는 "상속 된"( "계단식") 스타일이 아니라 클릭 한 지역과 관련된 정보 만 표시됩니다. 대신, 일종의 오버레이를 얻고 글꼴 정보를 실제로 보려면 정보»요소 정보 표시를 대신 사용할 수 있습니다. 페이지를 클릭 할 때마다 세부 정보가 표시됩니다.

— 아르 잔
소스
+1 더 자세한 답변을 보려면 내 것을 선택하십시오.
— BinaryMisfit
이 페이드 스크린 샷은 어떻게 얻었습니까? Mac처럼 보이는데 Vista 나 XP에서 비슷한 효과를 얻을 수 있습니까?
— Lazer
@Lazer, Mac의 Skitch (그러나 OS X의 창 경계는 매우 얇기 때문에 그림자는 일종의 표준이며 필요합니다). Windows에서 수행하는 방법을 모릅니다.
— Arjan
4

Firefox를 사용하는 경우 Font Finder Add-on이 있습니다. 그것은 기본적으로 Maxim Z. 가 그의 답변 에서 설명한 것과 같지만 자동으로 사용하기가 정말 쉽습니다.

— 루드비히 와인 젤
소스
Font Finder는 내가 찾던 것입니다. Chrome과 비슷한 확장 프로그램 만있는 경우
— kangax 2019
@kangax, 요즘 있습니다; 참조 알렉의 대답
— Arjan
또한 @kangax는 현재 Firefox와 Chrome에 실제 글꼴을 결정하는 도구가 내장되어 있습니다. 더 이상 추측하지 않습니다.
— Arjan
4

이것은 내가 만난 최고의 솔루션입니다. 그것은 시간의 99 %가 당신을 말할 것이다 북마크 / 확장이다 확실히 글꼴 TypeKit 구글 글꼴 API 글꼴을 포함하여 가능한 모든 글꼴의 사람들과 표시된 텍스트의 픽셀을 비교하여, 사용되는 것.

WhatFont 도구

여기에 이미지 설명을 입력하십시오

확인 해봐.

— 맥스
소스
멋지지만 아주 좋지만 실제로 픽셀을 비교하고 있다고 생각하지 않습니다 (오늘)? CSS가 방금 말했을 font-family: sans-serif때 그것은 또한보고 된 것이지만 그 자체로는 글꼴이 아닙니다. 사용할 때 결과로 font-family: someUnknownFont얻습니다 (default font). 실제로 Mac의 Times입니다. ( 이 JS Bin ; screenshot을 사용하여 북마크를 사용하여 테스트했습니다 .) 여전히 그렇습니다!
— Arjan
@Arjun 몇 달 전에 자세히 살펴 보았으므로 설명하고 기억할 수 있습니다. 후드 아래에서 두 가지 작업을 수행합니다. window.getComputedStyle계산 된 글꼴 모음을 가져 오는 데 사용 됩니다. 그런 다음이 스택을 반복하여 각 글꼴의 픽셀을 표시된 픽셀과 비교합니다. 첫 번째 일치는 팝업에서 기울임 꼴로 표시되고 나머지는 정상적으로 표시됩니다. 일치하는 것이 없으면이 표시 (default font)됩니다. 당신이보고있는 이유 sans-serif는 sans-serif글꼴과 글꼴 이 올바르게 일치하기 때문에 현재는 더 이상 식별하지 못하기 때문입니다.
— Max
파이어 폭스는 이것에 대한 나의 가장 새로운 친구입니다. 내 업데이트 된 답변을 참조하십시오 :-)
— Arjan
3

나는 어떤 소프트웨어도 모른다. 방금 Internet Explorer를 사용했으며 사용 된 글꼴이 다음과 같습니다.

글꼴 가족 : 그루지야, "times new roman", 시간, 분리

이것이 기본 글꼴입니다. font-family가있는 스타일 시트를 검색하면 나머지가 제공됩니다.

방법:

  • 홈페이지를 마우스 오른쪽 버튼으로 클릭
  • rel = stylesheet 행과 첨부 된 stylesheet URL을 찾습니다.
  • 브라우저에 복사하여 붙여넣고 CSS 파일을 다운로드하십시오.
  • 텍스트 편집기에서 엽니 다.

이미지 외부에서 정의되지 않는 이미지에서 글꼴을 찾는 경우

예, 나는 매우 지루했다. 결국 금요일 오후입니다. 그들이 스타일 시트를 regurlarly 업데이트하기 때문에 링크를 게시하지 않았습니다.

— 이진 미스 핏
소스
Uhuh, Firefox의 Firebug 또는 Safari의 Web Inspector ...?
— Arjan
1
내가 말했듯이. 난 지루했다. 브라우저 및보기 소스의 취향에 따라 변경하십시오. 다른 도구가 있지만 간단하게 유지하는 것이 반드시 잘못된 접근법은 아닙니다.
— BinaryMisfit
항상 Firefox에 의존하는 것 이외의 것을 사용자에게 가르치는 사실만으로도 좋습니다.
— 랜덤
위키 백과에 따르면, 모두 georgia와 times new roman서체입니다. 결과는 무엇을 의미합니까? 이 두 서체의 조합?
— Lazer
1

웹 개발자 Firefox 확장을 사용하여 웹 페이지의 특정 부분에서 사용되는 모든 스타일을 볼 수 있습니다. CSS 메뉴, 스타일 정보보기를 사용하십시오. 그런 다음 분석 할 텍스트를 클릭하고 결과에서 "font-family"특성을 검색하십시오.

— 에티엔 느 챔프
소스
정보»요소 표시 정보가 더 잘 작동합니다 (상속 된 스타일도 표시되므로 직접 검색 할 필요가 없습니다).
— Arjan
1

많은 사람들이 말한 것과는 달리 항상 소스 등을 보는 것이 중요하지는 않습니다. CSS가 문서 또는 외부 CSS 파일에 있는지 여부에 달려 있습니다. 외부에 있다면 소스를보고 실제로 파일에없는 글꼴 모음 태그를 찾을 수 없습니다.

Chrome 사용을 권유하는 포스터는 실제로 매우 유용한 팁을 제공했습니다. 여기서 무언가를 배우고 추가 팁을 추가하고 싶었습니다. Chrome에서 제공되는 개발자 도구에서 '컴퓨팅 된 스타일'을 클릭 한 다음 '상속 된 항목 표시'확인란을 클릭 한 다음 찾기 전에 아래로 스크롤해야합니다. 이는 극단적 인 예이지만 표시되는 위치는 페이지 구성 방법

-1

인라인 CSS가 아닌 경우 소스보기에서 페이지를 엽니 다. 브라우저 URL에 "/themes/01.css"붙여 넣기와 같은 CSS 주소를 복사하십시오. 텍스트 편집기 또는 CSS 편집기에서 리턴 붙여 넣기를 복사하십시오. 찾기 글꼴을 사용하거나 글꼴 모음을 완성하십시오. 나열된 글꼴 패밀리는 크기 및 굵게, 기울임 꼴 등의 기타 속성에 대한 페이지 글꼴을 표시하는 데 사용합니다.

고마워요

— 무료 뒤로 링크 받기
소스
당사 사이트를 사용함과 동시에 당사의 쿠키 정책과 개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.