0

我有一个脚本可以检查计算机中是否安装了特定字体（JS Fiddle 的代码）。无论是否安装了指定的字体，在这两种情况下，js 脚本都会调用该alert()函数。如果字体是“已安装”，怎么可能什么都不做，但如果字体是“未安装”，只打开灯箱图像查看器（这个）而不是alert()功能？

4

3 回答 3

1

我想你想要像Light Box这样的弹出窗口。

所以最好的方法是有一个额外的 div 并使用 display 属性显示/隐藏它。

您还可以使用 !Important 强制应用您的显示属性。并在您显示该 div 时为该 div 提供更多 z-index 。 

enter code here

if (!doesFontExist("Comic Sans MS"))
{
    function('Comic Sans MS DOES NOT exist');
    // logic for displaying div
}
于 2013-04-27T17:46:18.587 回答
0

在您的代码中使用它。HTML 添加anchor tag可以隐藏。

    <body>
    <a href="http://lokeshdhakar.com/projects/lightbox/images/image-2.jpg" rel="lightbox" title="my caption" style="display: none;" id="anchorId">image</a>
</body>

使用以下脚本

//
// Call this function and pass in the name of the font you want to check for availability.
//
function doesFontExist(fontName) {
    // creating our in-memory Canvas element where the magic happens
    var canvas = document.createElement("canvas");
    var context = canvas.getContext("2d");

    // the text whose final pixel size I want to measure
    var text = "abcdefghijklmnopqrstuvwxyz0123456789";

    // specifying the baseline font
    context.font = "72px monospace";

    // checking the size of the baseline text
    var baselineSize = context.measureText(text).width;

    // specifying the font whose existence we want to check
    context.font = "72px '" + fontName + "', monospace";

    // checking the size of the font we want to check
    var newSize = context.measureText(text).width;

    // removing the Canvas element we created
    delete canvas;

    //
    // If the size of the two text instances is the same, the font does not exist because it is being rendered
    // using the default sans-serif font
    //
    if (newSize == baselineSize) {
        return false;
    } else {
        return true;
    }
}

if (!doesFontExist("Comic Sans MS"))
{
    alert('Comic Sans MS DOES NOT exist');
    $("#anchorId").click(); 
}

// 你需要添加页面灯箱中提到的js和css

这是来自jsfiddle的工作示例 记住它只会在字体不存在时显示图像..

于 2013-04-27T15:21:49.867 回答
0

我认为您希望使用不是警报而是 html 结构的弹出式对话。

如果您使用Bootstrap，则可以使用Modal。

或者，您通常可以采用另一种方式。

  1. 创建结构以显示包含Font X
  2. 设置对象 CSSdisplay: none;
  3. 添加切换器（例如display: inline;或display: block;）以触发。
于 2013-04-27T15:26:49.870 回答