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

时间:2018-04-30 21:52:46

标签: css3 fonts cross-browser graceful-degradation

有(至少)两种显示比特币符号的方法。

如果您愿意,可以使用字体真棒和样式:

.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: "\20BF";
}

我更喜欢unicode方式。我觉得它更微妙。

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

请注意,我正在为我的网站下载一个带有该符号的字体,因此我很困惑为什么Android没有使用它:

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

在unicode无法使用的情况下,检测并显示fa图标的方法是什么?

理想情况下,我想关闭实际使用的字体中可用的unicode符号,而不是仅查看操作系统或其他可能符合或不符合可用符号的内容。 。我在Android操作系统上查找和使用具有此符号的某种字体也是一个很好的答案。 我没有标记 Android ,因为这不是Android开发;恰好是提醒我这个问题的环境。

1 个答案:

答案 0 :(得分:0)

我结合了几个关于检测豆腐字符和替换::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: "\20BF"; /* \0E3F */
}
<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>