SASS và @ font-face

Question

Tôi có CSS ​​sau - làm cách nào để mô tả nó trong SASS? Tôi đã cố gắng đảo ngược biên dịch nó với css2sass, và chỉ tiếp tục nhận được lỗi .... là nó CSS ​​của tôi (mà hoạt động ;-))?

@font-face { 
    font-family: 'bingo'; 
    src: url("bingo.eot"); 
    src: local('bingo'), 
     url("bingo.svg#bingo") format('svg'), 
     url("bingo.otf") format('opentype'); 
} 

Answer 1

Trong trường hợp bất cứ ai đã tự hỏi - đó có lẽ là css của tôi ...

@font-face 
    font-family: "bingo" 
    src: url('bingo.eot') 
    src: local('bingo') 
    src: url('bingo.svg#bingo') format('svg') 
    src: url('bingo.otf') format('opentype') 

sẽ làm như

@font-face { 
    font-family: "bingo"; 
    src: url('bingo.eot'); 
    src: local('bingo'); 
    src: url('bingo.svg#bingo') format('svg'); 
    src: url('bingo.otf') format('opentype'); } 

mà có vẻ là đủ gần ... chỉ cần kiểm tra kết xuất SVG

Answer 2

Tôi đã đấu tranh với điều này trong một thời gian. Giải pháp của Dycey là chính xác trong đó chỉ định src nhiều lần xuất ra cùng một điều trong tệp css của bạn. Tuy nhiên, điều này dường như phá vỡ trong OSX Firefox 23 (có lẽ các phiên bản khác nữa, nhưng tôi không có thời gian để kiểm tra).

Giải pháp qua trình duyệt @font-face từ Font Squirrel trông như thế này:

@font-face { 
    font-family: 'fontname'; 
    src: url('fontname.eot'); 
    src: url('fontname.eot?#iefix') format('embedded-opentype'), 
     url('fontname.woff') format('woff'), 
     url('fontname.ttf') format('truetype'), 
     url('fontname.svg#fontname') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

Để tạo ra src bất động sản với các giá trị bằng dấu phẩy, bạn cần phải viết tất cả các giá trị trên cùng một dòng, vì line- không được hỗ trợ trong Sass. Để sản xuất tuyên bố trên, bạn sẽ viết Sass sau:

@font-face 
    font-family: 'fontname' 
    src: url('fontname.eot') 
    src: url('fontname.eot?#iefix') format('embedded-opentype'), url('fontname.woff') format('woff'), url('fontname.ttf') format('truetype'), url('fontname.svg#fontname') format('svg') 
    font-weight: normal 
    font-style: normal 

tôi nghĩ rằng nó có vẻ ngớ ngẩn để viết ra những con đường một loạt các lần, và tôi không thích dòng quá dài trong mã của tôi, vì vậy tôi làm việc xung quanh nó bằng cách viết mixin này:

=font-face($family, $path, $svg, $weight: normal, $style: normal) 
    @font-face 
    font-family: $family 
    src: url('#{$path}.eot') 
    src: url('#{$path}.eot?#iefix') format('embedded-opentype'), url('#{$path}.woff') format('woff'), url('#{$path}.ttf') format('truetype'), url('#{$path}.svg##{$svg}') format('svg') 
    font-weight: $weight 
    font-style: $style 

Cách sử dụng: Ví dụ, tôi có thể sử dụng mixin trước để thiết lập lên font Frutiger ánh sáng như thế này:

+font-face('frutigerlight', '../fonts/frutilig-webfont', 'frutigerlight')