Compass SASS - 可下载字体：被消毒剂拒绝答案

【问题标题】：Compass SASS - downloadable font: rejected by sanitizerCompass SASS - 可下载字体：被消毒剂拒绝
【发布时间】：2021-09-07 15:26:36
【问题描述】：

我知道这里有很多关于这个问题的问题。我无意重复这些问题。我尝试了各种提议的解决方案，但没有一个为我解决了它。

我正在使用compass SASS syntax。所有文件都位于/static 目录中。

我尝试使用单引号而不是双引号，并从 _fonts.sass 文件中删除 .eot。我还在某处读到它解决了删除尾随 ?1400417483 的问题，但我不知道该怎么做，因为它是由指南针自动生成的。

控制台错误：

downloadable font: rejected by sanitizer (font-family: "circular-book" style:normal weight:normal stretch:normal src index:0) source: http://127.0.0.1:8000/static/fonts/lineto-circular-book.woff?1400417483
app.css:70:11
downloadable font: rejected by sanitizer (font-family: "circular-book" style:normal weight:normal stretch:normal src index:1) source: http://127.0.0.1:8000/static/fonts/lineto-circular-book.woff2?1465294178

config.rb

require 'compass/import-once/activate'
# Require any additional compass plugins here.

# Set this to the root of your project when deployed:
http_path = "/"
css_dir = "stylesheets"
sass_dir = "sass"
images_dir = "images"
javascripts_dir = "javascripts"
fonts_dir = "fonts"

# You can select your preferred output style here (can be overridden via the command line):
# output_style = :expanded or :nested or :compact or :compressed

# To enable relative paths to assets via compass helper functions. Uncomment:
relative_assets = true

# To disable debugging comments that display the original location of your selectors. Uncomment:
# line_comments = false


# If you prefer the indented syntax, you might want to regenerate this
# project again passing --syntax sass, or you can uncomment this:
preferred_syntax = :sass
# and then run:
# sass-convert -R --from scss --to sass sass scss && rm -rf sass && mv scss sass

_fonts.sass

@import compass/css3

+font-face("circular-book", font-files("lineto-circular-book.woff", "lineto-circular-book.woff2"))

$font: "circular-book", sans-serif

app.sass

html
  font-family: $font

app.css

@font-face {
  font-family: "circular-book";
  src: url('../fonts/lineto-circular-book.woff?1400417483') format('woff'), url('../fonts/lineto-circular-book.woff2?1465294178') format('woff2');
}

【问题讨论】：

标签： css sass font-face compass-sass

【解决方案1】：

解决方案。

它通过更改 _fonts.sass 解决了添加 $eot, $weight, $style 的问题

+font-face("circular-book", font-files("lineto-circular-book.woff", "lineto-circular-book.woff2"))

到

+font-face("circular-book", font-files("lineto-circular-book.woff", "lineto-circular-book.woff2"), "lineto-circular-book.eot", normal, normal)

以及生成的 app.css

@font-face {
  font-family: "circular-book";
  src: url('../fonts/lineto-circular-book.eot?1400417483');
  src: url('../fonts/lineto-circular-book.eot?&1400417483#iefix') format('embedded-opentype'), url('../fonts/lineto-circular-book.woff?1400417483') format('woff'), url('../fonts/lineto-circular-book.woff2?1465294178') format('woff2');
  font-weight: normal;
  font-style: normal;
}

【讨论】：

【解决方案2】：

显然 Firefox 在“被消毒剂拒绝”下隐藏了一个未找到的错误。仔细检查您是否正确路由字体文件并且它已部署

I found this helpful information here

【讨论】：