Как изящно отступить, когда контент недоступен - PullRequest
Новая
       25

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

0 голосов
/ 01 мая 2018

Есть (как минимум) два способа показать символ биткойн.

Одним из них является использование шрифта 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 в тех случаях, когда Юникод недоступен?

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

1 Ответ

0 голосов
/ 10 июня 2018

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