Блог

Главная - Вопросы по программированию - Шрифт Emoji в приложении Ruby on Rails 6 не работает при локальной загрузке из ресурсов

Шрифт Emoji в приложении Ruby on Rails 6 не работает при локальной загрузке из ресурсов

#ruby-on-rails #ruby #firefox #fonts #asset-pipeline

#ruby-on-rails #ruby #firefox #шрифты #ресурс-конвейер

Вопрос:

В моем Ruby on Rails 6 эмодзи Apple Color не работают в Firefox (macOS и windows10).

введите описание изображения здесь

Я импортировал шрифт:

 @import url(//db.onlinewebfonts.com/c/5ab304ade0d4f62d027d12464ca69443?family=Apple Color Emoji);

и они начали работать!

введите описание изображения здесь

Теперь я хочу, чтобы они были локально в моем приложении.

Я обнаружил в Google, что это распространенная проблема, и есть даже хорошее решение для ее устранения, разработанное Ником Гэлбритом.

 // define a new font face that just deals with emoji
@font-face {
font-family: "color-emoji";
src: local("Apple Color Emoji"),
     local("Segoe UI Emoji"), 
     local("Segoe UI Symbol"),
     local("Noto Color Emoji"); }

// add it *after* the serif, sans-serif or monospace
// ending default.
body {
  font-family: your-font, sans-serif, color-emoji;
}

Итак, я подготовил @font-face для первого шрифта «Apple Color Emojis» следующим образом:

 @font-face {
  font-family: 'AppleColorEmoji';
  src: asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.eot');
  src: asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.eot?#iefix') format('embedded-opentype'),
  asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.woff') format('woff'),
  asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.woff2') format('woff2'),
  asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.ttf') format('truetype'),
  asset-url('color-emoji/AppleColorEmoji/AppleColorEmoji.svg#Apple Color Emoji') format('svg');
}

Файлы находятся в app / assets / fonts / color-emoji / AppleColorEmoji и когда я пытаюсь использовать мой совершенно новый @font-face, подобный семейству шрифтов: ‘AppleColorEmoji’; угадайте, что происходит?

Да, они не работают. Есть идеи, что я делаю не так?

Я получил такую ошибку в консоли:

 downloadable font: rejected by sanitizer (font-family: 
"AppleColorEmoji" style:normal weight:400 stretch:100 src index:0) 
source: http://localhost:3000/assets/color- 
emoji/AppleColorEmoji/AppleColorEmoji- 
3ec445c87ae85d4ae8c4fdc2e7f5dfbe85e755b057c254af9e0f36a7cc6924e2.eot

Комментарии:

1. можете ли вы проверить шрифты на вкладке сеть и посмотреть, загружен ли шрифт? Также попробуйте использовать font-url вместо общего asset-url

2. Да, он загружен. Ничего не происходит, когда я использовал font-url вместо этого. Я только что отредактировал свой пост с ошибкой, которую я получил из консоли Firefox.

3. Да. Начертание шрифта выглядит следующим образом @font-face { font-family: 'AppleColorEmoji' } . Поэтому я попытался использовать его в моем CSS, подобном font-family: 'AppleColorEmoji'; . Я изменил его на font-family: 'Apple Color Emocji'; , и теперь он работает.