나침반 SCSS 글꼴 URL 구성 문제 (Compass SCSS font-url configuration issue)


문제 설명

나침반 SCSS 글꼴 URL 구성 문제 (Compass SCSS font‑url configuration issue)

Am writing down a template with use of compass sass here the font‑mixin makes some problem by without setting web font.And my config file is like

http_path = "/"
css_dir = "resources/stylesheets"
sass_dir = "resources/stylesheets" 
images_dir = "resources/images"
javascripts_dir = "resources/js"

and then by usage of font mixin generated output is 

@font‑face {
 font‑family: "cabinregular";
src: url('resources/stylesheets/fonts/cabin‑regular.eot?#iefix') format('embedded‑ 
opentype'), url('resources/stylesheets/fonts/cabin‑regular.ttf') format('truetype'),
 url('resources/stylesheets/fonts/cabin‑regular.woff') format('woff');
 } 

The path was correct but font won't apply while am running the html.But if i specify the http path like

   http_path="/somename/"

it applies. then why it won't works without specifying  the http_path..?


참조 솔루션

방법 1:

Bringing  src: url("../fonts/cabin‑regular?#iefix"); before the main src make working fine

@font‑face {
  font‑family: 'cabinregular';
  src: url("../fonts/cabin‑regular?#iefix");
  src: url("../fonts/cabin‑regular?#iefix") format("embedded‑opentype"), url("../fonts/cabin‑regular") format("woff"), url("../fonts/cabin‑regular") format("truetype"), url("../fonts/cabin‑regular.svg#cabin‑regular") format("svg");
  font‑weight: normal;
  font‑style: normal;
}

(by Vivek Vikranthuser3016976)

참조 문서

  1. Compass SCSS font‑url configuration issue (CC BY‑SA 3.0/4.0)

#SASS #compass-sass






관련 질문

나침반 SCSS 글꼴 URL 구성 문제 (Compass SCSS font-url configuration issue)

SASS: normalize.css가 작동하지만 컴파일된 CSS 파일에 표시되지 않습니까? (SASS: normalize.css works, but does not show up in compiled CSS file?)

CSS zurb 기초 및 dhtmlx (CSS zurb foundation and dhtmlx)

_settings.scss의 변수는 주석 처리되지 않은 상태로 컴파일됩니다. (Variables in _settings.scss are compiled as uncommented)

Grunt 및 Compass와 함께 node-normalize-scss 사용 (Using node-normalize-scss with Grunt and Compass)

부트스트랩이 있는 루프를 사용하여 여러 이벤트 추가 (Using a loop with bootstrap to add multiple events)

특정 파일에 대한 앵귤러 로더 재정의 (Override angular loaders for specific files)

상자 그림자가 있는 여러 겹치는 이미지에 대한 CSS (CSS for multiple overlapping images with box shadow)

중앙에 div를 만든 후 div를 만듭니다. (Make a div, after centered div)

소품과 값 사이에 공백을 적용하기 위한 Sass linting 규칙이 VS Code에서 잘못 작동합니까? (Is the Sass linting rule for enforcing a space between the prop and value working incorrectly with VS Code?)

Next.js를 사용하는 scss의 클래스 이름 규칙 (Class names convention for scss using Next.js)

새 프로젝트를 만드는 동안 Angular CLI에서 sass를 선택했습니다. 이제 sc로 변경하고 싶습니다. 어떻게 할 수 있습니까? (I chose sass in angular CLI while i was creating the new project. i want to change it to scss now. how can i do that?)







코멘트