如何在内容不可用时优雅地回退

Question

有（至少）两种显示比特币符号的方式。

一种是使用很棒的字体和风格，如果你愿意的话：

.fa-btc {
    font-size: 75%;
    color:#6f42c1;
    opacity: 0.8;
    vertical-align: -5%;
    font-variant: small-caps;
}

另一种是只显示新的Unicode字符20BF:

.bitcoin::before {
    font-size: 80%;
    opacity: 0.8;
    vertical-align: 10%;
    content: "BF";
}

我更喜欢 unicode 方式。我猜它更微妙。

但它还不适用于 Android。显然在 Android 网络浏览器上进行渲染的 Roboto 和 Nono 字体还没有。

请注意，我正在为我的网站下载一种带有符号的字体，所以我很困惑为什么 Android 没有使用它：

<!--website font-->
<link href="https://fonts.googleapis.com/css?family=Roboto|Roboto+Mono" rel="stylesheet">

在这些 unicode 不可用的情况下，有什么方法可以检测和显示 fa 图标？

理想情况下，我想关闭实际使用的字体中可用的 unicode 符号，而不是只查看 OS 或其他可能与或可能不一致的东西符号可用。当我在 Android OS 时找到并使用具有此符号的某种字体也是一个很好的答案。 我没有标记 Android 因为这不是 Android 开发；这恰好是提醒我这个问题的环境。

Answer 1

我结合了几个关于检测豆腐字符和替换 ::before content 的答案，然后想出了这个。

基于文本的解决方案
Android 开始工作后不需要代码修复

$(document).ready(function(){
  var bitcoinSymbolAvailable = document.getElementById('char-to-check').offsetWidth !== document.getElementById('not-renderable').offsetWidth;
  if(!bitcoinSymbolAvailable)
    $('body').append('<style>.bitcoin:before{content:"\0E3F" !important;}</style>');
});

.bitcoin::before {
  font-size: 80%;
  opacity: 0.8;
  vertical-align: 10%;
  content: "BF"; /* [=11=]E3F */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div>
  <img width="200" src="https://img.cinemablend.com/filter:scale/quill/9/a/d/3/5/0/9ad35052cecea0ff468e2f03476d9e8e385add82.jpg?mw=600">
  <h1>But first you must pay me... <span class="bitcoin">1,000,000</span>
</div>

<div style="position:absolute;visibility:hidden;">
  <span id="char-to-check">&#x20BF;</span>
  <span id="not-renderable">&#xFFFF;</span>
</div>

如何在内容不可用时优雅地回退

How to fall back gracefully when the content is not available

css

fonts

cross-browser

graceful-degradation