Как изящно отступить, когда контент недоступен

Есть (по крайней мере) два способа отображения символа биткойна.

Один из них - использовать шрифт awesome и стиль, который, если хотите:

.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";
}

Юникод мне больше нравится. Думаю, это более тонко.

Но пока не работает на Android. Шрифты Roboto и Nono, которые, по-видимому, выполняют рендеринг в веб-браузерах Android, еще не имеют его.

Обратите внимание, что я загружаю шрифт для своего сайта, у которого есть символ, поэтому я недоумеваю, почему Android его не использует:

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

Как можно обнаружить и отобразить значок fa в тех случаях, когда Unicode недоступен?

В идеале я хотел бы отключить символ Unicode, доступный в шрифте, который фактически используется, а не просто смотреть на ОС или другие вещи, которые могут совпадать или не совпадать с доступным символом. Поиск и использование определенного шрифта с этим символом, когда я работаю в ОС Android, также будет хорошим ответом. Я не отметил Android, потому что это не разработка для Android; это просто среда, которая предупредила меня о проблеме.


fonts css cross-browser graceful-degradation
person toddmo    schedule 30.04.2018    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я объединил пару ответов, касающихся обнаружения символов тофу и замены ::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>

person toddmo    schedule 09.06.2018