相关疑难解决方法(0)

我的CSS font-family: Helvetica, Arial, sans-serif;为整个页面指定了" ".看起来Verdana在某些部分被使用了.我希望能够验证这一点.

我已经尝试从浏览器复制和粘贴到Word,但它不保留字体.

有没有办法确定哪个字体实际用于一段文本？

Firebug会给我上面的字体列表[1],但是我没有看到确定使用哪种字体的方法.

1. 事实证明正在使用错误的列表,这解决了我原来的Verdana问题.但是我仍然很好奇是否有办法识别实际的渲染字体.

如果在文本字段中输入字符并且当前应用的字体不支持该字符,则会为该字符使用备份字体.是否有可能通过Javascript或其他方式判断何时发生这种情况？尝试创建一个脚本,如果字体不支持某个字符,则会提醒用户.谢谢你的帮助!

首先,这里有一个非常相似的问题:
如何使用javascript检查是否在网页中加载了Font Awesome？

我会试着解释为什么我的问题不同.

我发现浏览器已经开始阻止Web字体,这需要后备解决方案.使用普通的字符范围字体,这很容易:

CSS:

font-family: Lato, "Lucida Grande", Tahoma, Sans-Serif;

然而,字体真棒更难,因为它使用正常范围的字体之外的字符,并且不能有简单的单行css解决方案.

有几个选项可供选择,包括使用图像,或者在某些情况下使用其他字体的字符,类似于图标,但所有方法都需要在个人客户端的浏览器中检查字体是否真实有效.

链接问题的答案说,您可以使用以下代码检查是否加载了字体真棒:

function css(element, property) {
  return window.getComputedStyle(element, null).getPropertyValue(property);
}

window.onload = function () {
  var span = document.createElement('span');

  span.className = 'fa';
  span.style.display = 'none';
  document.body.insertBefore(span, document.body.firstChild);

  if ((css(span, 'font-family')) !== 'FontAwesome') {
    // add a local fallback
  }
  document.body.removeChild(span);
};

但是,我的本地回退永远不会被执行,因为css(span, 'font-family')它实际上返回FontAwesome.我相信这是因为导入的css文件没有问题,而css说字体系列应该是FontAwesome.事实仍然是FontAwesome无法正常工作.换句话说,接受的答案只检查字体是否存在令人敬畏的css,而不是因为安全问题而阻止了Web字体本身.

另一个问题的OP在评论中澄清了为什么他们提出这个问题:

我这样做是因为我正在编写一段js,这些js将被加载到许多不同的页面中,我不确定它们是否会有字体 - 如果它们不是我将要加载它.

我的问题是浏览器阻止网络字体,我希望标题足够清晰,可以被认为是一个分离和不同的问题.Windows 10和IE11的组合设置中存在问题.我已经用尽了我的选择,只需关闭阻止字体的安全设置.

重复的问题解释:

问题根本不是建议问题的重复.这与资源是否加载无关.资源的加载工作正常.主机未被阻止.webapps的呈现和显示是问题,这也在原始问题中解释,但现在再次提到,因为有人建议关闭作为副本.

编辑,进一步阅读:

我在此处解释了关闭阻止Web字体的设置的努力

Google Chrome 在 DevTools 中显示渲染的字体。

例如，给定：

font-family: Montserrat, Helvetica, sans-serif;

并且Montserrat字体丢失/禁用，Chrome 告诉我们Helvetica正在呈现：

有没有办法在 JavaScript 中获取渲染的字体？（即使它只适用于 Chrome）

笔记：

1. 此解决方案建议getComputedStyle(...).fontFamily，但它返回 CSS 声明"Montserrat, Helvetica, sans-serif"，而不是实际呈现的字体。
2. 此解决方案使用 puppeteer，但我无法弄清楚如何纯粹在 DevTools 中实现相同的目标（没有 puppeteer）。

我知道你可以获得font-family值,window.getComputedStyle()但这并不总是浏览器用来呈现的字体.例如,如果给定的文本包含(多语言)文本的字体族不携带,浏览器呈现部分地与系统字体的文本.

如果你看一看内置的web开发工具,无论是在Chrome或Firefox,他们都有一个小区域,以显示(Rendered Fonts在Chrome窗格或Fonts选项卡上的Firefox浏览器)所使用的确切的字体.对于Firefox,我想这个代码是用的,它似乎是在调用内部API.

我正在寻找任何符合DOM(或特定于供应商)的方式来从JavaScript土地获取确切的字体.如果这意味着编写浏览器扩展/附加组件以提供API /注入信息/任何内页代码访问,这是最糟糕的情况,但可以接受.

我有一个带有内联样式的段落，如下所示：

<p style="font-family:georgia,garamond,serif;">

我的问题是，有没有办法找出我的页面正在使用哪种字体以及选择过程是什么？

我正在尝试获取浏览器用于显示警报、提示等的字体大小和字体系列。所以我这样做：
alert(document.body.style.fontFamily); 但它向我显示了一个空白警报。我哪里错了？

我正在尝试找出一种在网络上以可变宽度字体显示吉他和弦的好方法，如果可能的话最好只使用 HTML 和 CSS。我试图通过将和弦排列在特定字母上方来做到这一点。

我想出了以下解决方案（ https://jsfiddle.net/u33v87ob/）：

HTML：

<div class="chunk">
  <span class="chord"></span>
  <br>
  <span class="lyric">As&nbsp;</span>
</div>
<div class="chunk">
  <span class="chord">C</span>
  <br>
  <span class="lyric">I was going over the&nbsp;</span>
</div>
<div class="chunk">
  <span class="chord">Am</span>
  <br>
  <span class="lyric">far fam'd Kerry Mountains,</span>
</div>

CSS：

.chunk {
  float: left;
}

从显示的角度来看，这非常有效。然而，搜索引擎是这样读取的，这意味着我失去了歌词的搜索结果：

As CI was going over theAmfar fam'd Kerry Mountains

尝试复制+粘贴也会导致输出乱码。我宁愿复制的文本看起来像：

CAm
As I was going over the far fam'd Kerry Mountains,

有什么方法可以实现这个目标吗？

编辑：对于后代，这里是原始问题的扩展，您一定要检查一下这个答案是否有帮助！