Compass font-face outputs wrong path to font file

问题

@font-face {
  font-family: "HelveticaNeueLTStd-Lt";
  src: url('/css/fonts/HelveticaNeueLTStd-Lt.otf') format('opentype');
}

That is the output of my compass code:

@include font-face('HelveticaNeueLTStd-Lt', font-files('HelveticaNeueLTStd-Lt.otf'));

I can't seem to get the output url to be either just 'Helvetica......otf' or just 'fonts/Helvetica......otf'.

My directory assets are as followed:

http_path = "/"
css_dir = "css"
sass_dir = "sass"
images_dir = "img"
javascripts_dir = "js"
fonts_dir = "fonts"

I have tried taking off fonts_dir and changing it to "" with no luck

回答1:

Set http_fonts_path or :relative assets, true. :)

回答2:

i had the same problem. Just use URL instead font-files

@include font-face('HelveticaNeueLTStd-Lt', url('HelveticaNeueLTStd-Lt.otf'));

回答3:

If I understand correctly you path output is '/css/fonts/HelveticaNeueLTStd-Lt.otf' but you want it to go to '/fonts/HelveticaNeueLTStd-Lt.otf.

Maybe try changing your config.rb file to

fonts_dir = "../fonts"

I would not recommend using a .otf file for web

I usually use the mixin this way:

@include font-face('HelveticaNeueLTStd-Lt', font-files(
'HelveticaNeueLTStd-Lt.woff', woff,
'HelveticaNeueLTStd-Lt.ttf', ttf,
'HelveticaNeueLTStd-Lt.svg', svg),
'HelveticaNeueLTStd-Lt.eot');

来源：https://stackoverflow.com/questions/13205134/compass-font-face-outputs-wrong-path-to-font-file