정의된 글꼴 ​​중 어떤 글꼴이 웹 페이지에 사용되었는지 어떻게 감지하나요?

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

  •  08-06-2019
  •  | 
  •  

문제

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

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

정의된 글꼴 ​​중 어떤 글꼴이 사용자 브라우저에 사용되었는지 어떻게 알 수 있나요?

내가 왜 이 일을 하고 싶은지 궁금해하는 사람들을 위해 편집하세요: 내가 감지한 글꼴에는 다른 글꼴에서는 사용할 수 없는 문자 모양이 포함되어 있으며 사용자에게 해당 글꼴이 없는 경우 사용자가 올바른 글꼴로 내 웹 응용 프로그램을 사용할 수 있도록 해당 글꼴을 다운로드하라는 링크를 표시하고 싶습니다.

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

도움이 되었습니까?

해결책

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

출처는 다음과 같습니다.자바스크립트/CSS 글꼴 감지기(ajaxian.com;2007년 3월 12일)

다른 팁

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

j폰트 체커 깃허브에서

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

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

Helvetica가 설치/사용된다고 가정하면 다음과 같은 결과를 얻을 수 있습니다.

  • Safari의 "내 가짜 글꼴"(그리고 다른 웹킷 브라우저도 믿습니다).
  • Gecko 브라우저와 IE에서는 "내 가짜 글꼴, helvetica, san-serif"입니다.
  • Opera 9의 "Helvetica"는 Gecko와 일치하기 위해 Opera 10에서 이것을 바꾸고 있음을 읽었습니다.

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

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

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

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

효과적인 기술은 요소의 계산된 스타일을 살펴보는 것입니다.이는 Opera와 Firefox에서 지원됩니다(Safari에서도 확인했지만 테스트하지는 않았습니다).IE(적어도 7)는 스타일을 가져오는 방법을 제공하지만 계산된 스타일이 아닌 스타일시트에 있던 모든 것으로 보입니다.quirksmode에 대한 자세한 내용: 스타일 가져오기

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

/**
 * 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가 설치되어 있으면 arial을 반환하고 마지막으로 시스템 기본 sans-serif 글꼴의 이름을 반환해야 합니다.CSS 선언에서 글꼴 순서는 중요합니다.

시도해 볼 수도 있는 흥미로운 해킹은 컴퓨터에 어떤 글꼴이 설치되어 있는지 감지하기 위해 다양한 글꼴로 숨겨진 요소를 많이 만드는 것입니다.나는 누군가가 이 기술을 사용하여 멋진 글꼴 통계 수집 페이지를 만들 수 있다고 확신합니다.

또 다른 해결책은 다음을 통해 글꼴을 자동으로 설치하는 것입니다. @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 파일이 가장 잘 작동합니다.

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

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

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

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

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

저는 파운트를 사용하고 있습니다.Fount 버튼을 북마크바로 끌어서 클릭한 다음 웹사이트의 특정 텍스트를 클릭하기만 하면 됩니다.그러면 해당 텍스트의 글꼴이 표시됩니다.

https://fount.artequalswork.com/

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

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

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

당신은 넣을 수 있습니다 어도비 블랭크 보려는 글꼴 뒤의 글꼴 모음에서 해당 글꼴에 없는 글리프는 렌더링되지 않습니다.

예:

font-family: Arial, 'Adobe Blank';

내가 아는 한 요소의 어떤 문자 모양이 해당 요소의 글꼴 스택에 있는 어떤 글꼴에 의해 렌더링되는지 알려주는 JS 방법은 없습니다.

이는 브라우저에 serif/sans-serif/monospace 글꼴에 대한 사용자 설정이 있고, 해당 글꼴에서 문자 모양이 발견되지 않을 경우 사용할 자체 하드 코딩된 대체 글꼴도 있다는 사실로 인해 복잡해집니다. 글꼴 스택. 따라서 브라우저는 글꼴 스택이나 사용자 브라우저 글꼴 설정에 없는 글꼴로 일부 글리프를 렌더링할 수 있습니다. Chrome 개발자 도구는 선택한 요소의 글리프에 대해 렌더링된 각 글꼴을 표시합니다..따라서 여러분의 컴퓨터에서는 그것이 무엇을 하고 있는지 볼 수 있지만, 사용자의 컴퓨터에서 무슨 일이 일어나고 있는지 알 수 있는 방법은 없습니다.

예를 들어 사용자의 시스템이 여기에 역할을 할 수도 있습니다. 창에서 글꼴 대체를 수행합니다. 글리프 수준에서.

그래서...

관심 있는 문자 모양의 경우, 지정한 글꼴이 없더라도 사용자의 브라우저/시스템 대체에 의해 렌더링되는지 여부를 알 수 있는 방법이 없습니다.

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

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