Определить, установлен ли определенный шрифт - PullRequest
Новая
       19

Определить, установлен ли определенный шрифт

5 голосов
/ 21 мая 2010

Как определить, установлен ли определенный шрифт с использованием только javascript.(Независимо от того, включен он или нет).

Спасибо

Ответы [ 5 ]

2 голосов
/ 23 июля 2018

Вот решение, чтобы проверить, установлен ли шрифт на вашем устройстве на html-странице. Идея состоит в том, чтобы создать очень узкий шрифт и определить его в CSS с URL-адресом объекта данных, проверить ширину целевого шрифта с помощью этого шрифта.

Вот пример: 

<html>
<head>
    <style type="text/css">
        @font-face {
            font-family: '______NONE______';
            src: url('data:application/font-woff;base64,d09GRgABAAAAAAM0AAsAAAAABCQAAQAAAAAAAAAAAAAAAAAAAAAAAAAAABVPUy8yAAABcAAAADwAAABgNVxaOmNtYXAAAAG0AAAAKQAAADQADACUZ2FzcAAAAywAAAAIAAAACP//AANnbHlmAAAB6AAAACQAAAAwK9MKuGhlYWQAAAEIAAAAMwAAADYLo1XbaGhlYQAAATwAAAAcAAAAJP2RAdRobXR4AAABrAAAAAgAAAAIAMn9LGxvY2EAAAHgAAAABgAAAAYAGAAMbWF4cAAAAVgAAAAXAAAAIAAEAAVuYW1lAAACDAAAAQsAAAHwJKxCKHBvc3QAAAMYAAAAEwAAACD/KgCWeNpjYGRgYABi+QdqV+P5bb4ycHMwgMD1GraPEJqz/d80BoZ/PxgygFw2kFoGBgA++AvVAHjaY2BkYGBgBMOUf9MYc/79YACJIAMmAF7xBGN42mNgZGBgYGJgYQDRDFASCQAAAQEACgB42mNgZkhhnMDAysDAOovVmIGBURpCM19kSGMSYmBgAklhBR4+CgoMDgyOQMgIhhlgYUYoCaEZAIdLBiEAZP6WAGT+lnjaY2BgYGJgYGAGYhEgyQimWRgUgDQLEIL4jv//Q8j/B8B8BgBSlwadAAAAAAAADAAYAAB42mNg/DeNgeHfD4YMBmYGBkVTY9F/05IyMhgYcIgDAGnPDrV42oWQzU7CUBCFvwISZcEz3LjSBBoQ/yIrYzTEGEmIYY9QiglS01YMOx/DV+AtPXeophtjmumdOffMmXMH2GdOlaB2ACwUuzwQvi7yCk3d7PIqh794rcTZI+WryOslvMFn0OCJDW9EmjRhqtOxVRwJTXhXpxOa8CrOhJXQY0JhJ3Tocmn5NUt9jhEvxHKTk1kV6YyksNZ/ZnUsxaV0Uh4ZKm65YmycTL2J9J1UQ2l3/sT73JvKxlz0aJXc9Lkzds6NeiNNylWn1u37z0wjFP9UcSH8XFmbZ03JtYmFTu99Xqg4PqSR2Q5+9PxbnBx4Zyu9yP070+ultkPHoNhRmwchsaqpOLbhb0h9RfYAeNpjYGYAg//qDNMYsAAAKDQBwAAAAAAB//8AAg==');
        }
    </style>
    <script type="text/javascript">

        function checkFontAvailable(font) {
            if (!font || font == "______NONE______") {
                return false;
            }
            var context = document.createElement("canvas").getContext("2d");
            context.font = `200px ______NONE______`;
            var originalWidth = context.measureText("A").width;
            context.font = `200px ${font.replace(/^\s*['"]|['"]\s*$/g, "")},______NONE______`;
            return context.measureText("A").width != originalWidth;
        }
    </script>
</head>
</html>

Вот результат теста: 

checkFontAvailable("微软雅黑333")
false
checkFontAvailable("微软雅黑")
true
checkFontAvailable("arial")
true
checkFontAvailable("arial black")
true
2 голосов
/ 21 мая 2010

@ Матчу предложил вас правильно, но вот что вы ищете:

http://remysharp.com/2008/07/08/how-to-detect-if-a-font-is-installed-only-using-javascript/

0 голосов
/ 21 мая 2010

Если вам абсолютно необходим определенный шрифт, все ваши посетители должны иметь текущие браузеры. Тогда вы можете использовать веб-шрифты .

Если это не вариант, вы должны отобразить шрифт на вашем сервере и предоставить изображение.

0 голосов
/ 21 мая 2010

Декларации семейства шрифтов должно быть достаточно, чтобы обеспечить запасной вариант в случае отсутствия нужного шрифта.

Но если вам действительно нужно использовать специальный шрифт на вашем сайте, хотя для этого используется JavaScript,Я бы порекомендовал Cufon , так как это наиболее кросс-браузерное решение - есть исправление CSS3 (объявления шрифтов), но оно пока не работает во всех браузерах.

0 голосов
/ 21 мая 2010

Как насчет того, чтобы делать то, что делает остальной мир: указывать шрифт с помощью CSS и предлагать запасные варианты? Ни одно приложение не должно нуждаться в , чтобы знать, какие шрифты доступны, и при этом нет надежного способа сделать это. (Вам, вероятно, придется распечатать скрытый div со шрифтом и измерить его, чтобы увидеть, соответствуют ли размеры тем, что вы ожидали, но это будет чрезвычайно хрупким.)

Просто зайдите на: 

body { font-family: MyFont, Helvetica, Arial, sans-serif }

Если вы хотите делать что-либо со шрифтом, кроме отображения в нем, если это возможно, вариантов, рассмотрите альтернативное решение.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...