웹 페이지에서 사용 된 정의 된 글꼴 중 하나를 감지하는 방법은 무엇입니까?

내 페이지에 다음 CSS 규칙이 있다고 가정합니다.

body {
  font-family: Calibri, Trebuchet MS, Helvetica, sans-serif;
}

사용자 브라우저에서 사용 된 정의 된 글꼴 중 하나를 어떻게 감지합니까?

내가 왜 이것을 원하는지 궁금해하는 사람들을 위해 편집하십시오 : 내가 감지하는 글꼴에는 다른 글꼴에서 사용할 수없는 글리프가 포함되어 있으며 사용자에게 글꼴이없는 경우 해당 글꼴을 다운로드하도록 요청하는 링크를 표시하려고합니다 내 웹 응용 프로그램을 올바른 글꼴로 사용할 수 있습니다.

현재 모든 사용자에게 다운로드 글꼴 링크를 표시하고 있으며 올바른 글꼴이 설치되지 않은 사용자에게만 표시하고 싶습니다.

나는 그것이 일종의 iffy이지만 꽤 안정적인 방식으로 수행되는 것을 보았습니다. 기본적으로 요소는 특정 글꼴을 사용하도록 설정되고 문자열은 해당 요소로 설정됩니다. 요소에 설정된 글꼴이 없으면 부모 요소의 글꼴을 사용합니다. 그래서 그들이하는 일은 렌더링 된 문자열의 너비를 측정하는 것입니다. 파생 된 글꼴이 아닌 원하는 글꼴에 대해 예상 한 것과 일치하면 존재합니다. 고정 폭 글꼴에는 작동하지 않습니다.

그것이 어디에서 왔는지는 다음과 같습니다 자바 스크립트 / CSS 글꼴 검출기 (ajaxian.com, 2007 3월 12일)

글꼴이 설치되어 있는지 여부를 확인하는 데 사용할 수있는 간단한 JavaScript 도구를 작성했습니다.
간단한 기술을 사용하며 대부분의 경우 정확해야합니다.

github의 jFont 검사기

@pat 실제로, Safari는 사용 된 글꼴을 제공하지 않습니다. Safari는 적어도 경험상 설치 여부에 관계없이 항상 스택의 첫 번째 글꼴을 반환합니다.

font-family: "my fake font", helvetica, san-serif;

Helvetica가 설치 / 사용 된 것으로 가정하면 다음과 같은 이점이 있습니다.

• Safari의 "나의 가짜 글꼴"(그리고 다른 웹킷 브라우저도 믿습니다).
• Gecko 브라우저 및 IE의 "나의 가짜 글꼴, helvetica, san-serif"
• Opera 9의 "helvetica"는 Opera 10에서 Gecko와 일치하도록이를 변경하고 있음을 읽었습니다.

이 문제를 해결하고 Font Unstack을 만들었습니다. Font Unstack 은 스택의 각 글꼴을 테스트하고 처음 설치된 글꼴 만 반환합니다. @MojoFilter가 언급하는 트릭을 사용하지만 여러 개가 설치된 경우 첫 번째 트릭 만 반환합니다. @tlrobinson이 언급 한 약점 (Windows는 Arial을 Helvetica를 자동으로 대체하고 Helvetica가 설치되었다고보고 함)으로 인해 어려움을 겪지 만 그렇지 않으면 잘 작동합니다.

작동하는 기술은 요소의 계산 된 스타일을 보는 것입니다. 이것은 Opera와 Firefox에서 지원됩니다 (사파리에서는 정찰하지만 테스트하지는 않았습니다). IE (적어도 7)는 스타일을 얻는 방법을 제공하지만 계산 된 스타일이 아닌 스타일 시트에있는 것 같습니다. quirksmode에 대한 자세한 내용 : Get Styles

다음은 요소에 사용 된 글꼴을 가져 오는 간단한 함수입니다.

/**
 * Get the font used for a given element
 * @argument {HTMLElement} the element to check font for
 * @returns {string} The name of the used font or null if font could not be detected
 */
function getFontForElement(ele) {
    if (ele.currentStyle) { // sort of, but not really, works in IE
        return ele.currentStyle["fontFamily"];
    } else if (document.defaultView) { // works in Opera and FF
        return document.defaultView.getComputedStyle(ele,null).getPropertyValue("font-family");
    } else {
        return null;
    }
}

이에 대한 CSS 규칙이 다음과 같은 경우

#fonttester {
    font-family: sans-serif, arial, helvetica;
}

그런 다음 helvetica가 설치되어 있으면 helvetica를 반환해야합니다. 그렇지 않으면 arial이며 마지막으로 시스템 기본 sans-serif 글꼴의 이름입니다. CSS 선언에서 글꼴 순서는 중요합니다.

당신이 시도 할 수있는 흥미로운 해킹은 컴퓨터에 설치된 글꼴을 감지하기 위해 많은 다른 글꼴로 숨겨진 요소를 많이 만드는 것입니다. 누군가 가이 기술로 멋진 글꼴 통계 수집 페이지를 만들 수 있다고 확신합니다.

단순화 된 형태는 다음과 같습니다.

function getFont() {
    return document.getElementById('header').style.font;
}

더 완전한 것이 필요하면 이것을 확인 하십시오 .

간단한 해결책이 있습니다-그냥 사용하십시오 element.style.font:

function getUserBrowsersFont() {
    var browserHeader = document.getElementById('header');
    return browserHeader.style.font;
}

이 기능은 원하는 것을 정확하게 수행합니다. 실행시 사용자 / 브라우저의 글꼴 유형을 반환합니다. 이것이 도움이되기를 바랍니다.

또 다른 해결책은 글꼴을 자동으로 설치하여 @font-face감지 필요성을 없애는 것입니다.

@font-face { 
font-family: "Calibri"; 
src: url("http://www.yourwebsite.com/fonts/Calibri.eot"); 
src: local("Calibri"), url("http://www.yourwebsite.com/fonts/Calibri.ttf") format("truetype");
}

물론 저작권 문제를 해결하지는 못하지만 항상 프리웨어 글꼴을 사용하거나 직접 글꼴을 만들 수도 있습니다. 가장 잘 작동하려면 .eot& .ttf파일 이 모두 필요합니다 .

Calibri는 Microsoft 소유의 글꼴이므로 무료로 배포해서는 안됩니다. 또한 사용자가 특정 글꼴을 다운로드하도록 요구하는 것은 사용자에게 친숙하지 않습니다.

글꼴 라이센스를 구입하여 응용 프로그램에 포함시키는 것이 좋습니다.

Fount를 사용하고 있습니다. Fount 버튼을 책갈피 막대로 끌어서 클릭 한 다음 웹 사이트에서 특정 텍스트를 클릭하면됩니다. 그런 다음 해당 텍스트의 글꼴이 표시됩니다.

https://fount.artequalswork.com/

이 웹 사이트를 사용할 수 있습니다 :

http://website-font-analyzer.com/

그것은 당신이 원하는 것을 정확하게합니다 ...

Adobe Blank를 넣을 수 있습니다보고자하는 글꼴 다음의 글꼴 모음 를 해당 글꼴에없는 글리프는 렌더링되지 않습니다.

예 :

font-family: Arial, 'Adobe Blank';

내가 아는 한 요소의 어떤 글리프가 해당 요소의 글꼴 스택에 어떤 글꼴로 렌더링되는지 알려주는 JS 방법이 없습니다.

브라우저에는 serif / sans-serif / monospace 글꼴에 대한 사용자 설정이 있으며, 그림의 글꼴에 글리프가없는 경우 사용할 하드 코딩 된 대체 글꼴이 있습니다. 글꼴 스택. 따라서 브라우저는 글꼴 스택 또는 사용자의 브라우저 글꼴 설정에없는 글꼴로 일부 글리프를 렌더링 할 수 있습니다. Chrome 개발자 도구는 선택한 요소의 글리프에 대해 렌더링 된 각 글꼴을 표시합니다. . 따라서 컴퓨터에서 수행중인 작업을 볼 수는 있지만 사용자 컴퓨터에서 무슨 일이 일어나고 있는지 알 수있는 방법이 없습니다.

예를 들어 윈도우가 글리프 레벨에서 폰트 대체 를 수행하는 것과 같이 사용자의 시스템이 이에 참여할 수도 있습니다 .

그래서...

관심있는 글리프의 경우 사용자가 지정한 글꼴이없는 경우에도 사용자의 브라우저 / 시스템 폴백에서 렌더링되는지 여부를 알 방법이 없습니다.

JS에서 테스트하려면 Adobe Blank를 포함한 글꼴 모음으로 개별 글리프를 렌더링하고 너비가 0인지 확인하기 위해 너비를 측정 할 수 있지만 테스트하려는 각 글리프와 각 글꼴을 철저히 반복해야합니다 . 그러나 요소 글꼴 스택에서 글꼴을 알 수 있지만 사용자 브라우저에서 어떤 글꼴을 사용하도록 구성되어 있는지 알 수있는 방법은 없습니다. 최소한 일부 사용자에게는 반복하는 글꼴 목록이 불완전합니다. (새 글꼴이 나오고 사용되기 시작하면 미래의 증거가 아닙니다.)