Font Mặt Mixin cho Ít

Question

Sử dụng Ít Tôi xác định font-gia đình như sau:

@georgia: georgia, times, 'times new roman', 'nimbus roman no9 l', serif; 

Sau đó, tôi có mixin ít:

.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) { 
    font: @style @variant @weight @size~"/"@lineheight @family; 
} // font 

Cuối cùng tôi sử dụng nó như thế này:

p { 
    .font(@georgia, 1.0em, 1.5) 
} 

Nhưng tôi cũng muốn xác định họ phông chữ bằng phông chữ tùy chỉnh:

@something: 'custom-font', arial, ...; 

Nhưng trước tiên tôi cần phải đăng ký tùy chỉnh font chữ:

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

Có thể tạo ra một mixin LESS cho @font-face để tôi có thể vượt qua các tên font và đường dẫn và đăng ký các phông chữ mà không lặp lại tất cả các mã này?

Tôi không chắc chắn làm thế nào để tích hợp này với mixin phông chữ của tôi ...

Hoặc nếu có thậm chí là một cách tốt hơn để làm điều này ...

cảm ơn, Miguel

Answer 1

Bạn có thể xác định mixin tùy chỉnh của mình để bao gồm phông chữ tùy chỉnh, nhưng vì LESS không thực hiện bất kỳ chỉ thị kiểm soát nào, chỉ bảo vệ cho mixin (vô dụng trong khía cạnh của câu hỏi hiện tại), bạn không thể rút ngắn mã của mixin cho định nghĩa phông chữ.

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

Answer 2

LESS thực sự hỗ trợ có mixin với các tham số. Xem tại đây: http://lesscss.org/#-parametric-mixins

Answer 3

Tôi biết một bài đăng cũ NHƯNG, tôi đã giải quyết vấn đề này như thế này, hy vọng nó sẽ giúp người khác.

Trước tiên tôi tạo ra một mixin tham số với everythign rằng sẽ lặp lại bên trong @ font-face:

.loadFont(@Weight; @Name; @Local; @Eot:'@{Local}.eot'; @Woff:'@{Local}.woff'){ 
    font-family: 'Open Sans'; 
    font-style: normal; 
    font-weight: @Weight; 
    src: url(@Eot); 
    src: local(@Name), local(@Local), url(@Eot) format('embedded-opentype'), url(@Woff) format('woff'); 
} 

Sau đó nạp tất cả các phông chữ web của tôi (trong trường hợp này mở sans)

@font-face {.loadFont(100;'Roboto Thin';'Roboto-Thin')} 
@font-face {.loadFont(300;'Roboto Light';'Roboto-Light')} 
@font-face {.loadFont(400;'Roboto Regular';'Roboto-Regular')} 
@font-face {.loadFont(500;'Roboto Medium';'Roboto-Medium')} 
@font-face {.loadFont(700;'Roboto Bold';'Roboto-Bold')} 
@font-face {.loadFont(900;'Roboto Black';'Roboto-Black')} 

Sau đó, đã tạo một mixin tham số thứ hai với quy tắc CSS để áp dụng cho các phần tử

.font(@weight:400; @size:14px; @font-family:'Open Sans', sans-serif){ 
    font:@arguments; 
} 

Và cuối cùng tôi sử dụng nó trên các yếu tố của tôi như thế này

div.someClass{ 
    .font(); //to accept all default parameters 
} 
div.otherClass{ 
    .font(100; 40px); //to specify weight and size 
} 

Như một lưu ý phụ.Tôi có tất cả của tôi *.eot và *.woff file bên cạnh các tập tin LESS và đặt tên là @Local tham số (Open-Sans.woff || Open-Sans.eot)

Answer 4

Tôi thích cấu trúc phông chữ của tôi trên các thư mục, như thế này:

/fonts/OpenSans-Bold/OpenSans-Bold.eot 
/fonts/OpenSans-Bold/OpenSans-Bold.svg 
/fonts/OpenSans-Bold/OpenSans-Bold.ttf 
/fonts/OpenSans-Bold/OpenSans-Bold.woff 

Và tôi sử dụng mixin LESS này cho font-face:

.font-face(@fontName: sans-serif; @fontWeight: normal; @fontStyle: normal) { 
    @font-face { 
     font-family: @fontName; 
     src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot'); 
     src: url('@{pTheme}/fonts/@{fontName}/@{fontName}.eot?#iefix') format('embedded-opentype'), 
      url('@{pTheme}/fonts/@{fontName}/@{fontName}.woff') format('woff'), 
      url('@{pTheme}/fonts/@{fontName}/@{fontName}.ttf') format('truetype'), 
      url('@{pTheme}/fonts/@{fontName}/@{fontName}.svg#@{fontName}') format('svg'); 
     font-weight: @fontWeight; 
     font-style: @fontStyle; 
    } 
} 

đâu:

@pTheme: "../../themes/[THEME NAME]"; 

Mixin gọi Ví dụ:

.font-face('OpenSans-Bold'); 

tôi đã thực hiện các biến @pTheme vì vậy tôi có thể sử dụng nó cũng trên hình ảnh nền, như thế này:

background: url("@{pTheme}/images/logo.png") no-repeat; 

Answer 5

Tôi biết câu hỏi này là một ít tuổi, nhưng tôi chạy với câu trả lời của Mészáros Lajos. Cần phải tính đến một vài điều mà hiện tại nó không phải là:

1. Họ phông chữ và tên phông chữ của bạn không cần phải khớp; trên thực tế, đối với "in đậm" và "in nghiêng", bạn có thể muốn sử dụng Liên kết kiểu. Xem: http://www.smashingmagazine.com/2013/02/14/setting-weights-and-styles-at-font-face-declaration/. Điều này ngăn "in đậm" và "giả nghiêng" xảy ra khi trình duyệt không hiểu mối quan hệ giữa các phông chữ của bạn (ví dụ: không biết rằng MyFont-Bold là phông chữ chính xác để sử dụng khi bạn có thẻ mạnh bên trong văn bản đang sử dụng MyFont).
2. Tên họ phông chữ và id SVG không cần phải khớp; ví dụ: tệp montserrat-regular.svg có thể có ID SVG của montserratregular. Có, bạn có thể sửa lỗi này bằng cách đổi tên tệp của mình và có thể bạn nên làm, nhưng nếu bạn đang nhận tệp từ xa (CDN), bạn có thể không có sự sang trọng đó.
3. Sở thích cá nhân, tôi đã chuyển thứ tự của biến thể và trọng số. Trong viết tắt phông chữ CSS, biến thể đến trước, vì vậy để giữ cho mọi thứ tương tự, tôi đặt nó đầu tiên ở đây.
4. Một lần nữa, sở thích cá nhân, tôi đã xóa mặc định, vì tôi không muốn gọi phương thức này mà không rõ ràng. Khi bạn phải chỉ định mọi thứ, bạn ít có khả năng quên rằng bạn đã thực sự cần phải thay đổi ID SVG cho phông chữ đó.
5. Vì cửa sổ Chrome hiện không chống bí danh WOFF, tôi đã chuyển đơn đặt hàng để di chuyển SVG ngay sau EOT (IE cũ cần EOT trước hoặc sẽ bị hỏng). Credit

---

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

---

Answer 6

Dưới đây là màn biểu diễn của tôi cho Sass, kiểm tra và làm việc.

@mixin fontface($family: sans-serif, $weight: normal, $style: normal, $path: '../fonts', $filename: 'font'){ @font-face{ font-family: $family; src:url('#{$path}/#{$filename}.eot'); src:url('#{$path}/#{$filename}.eot?#iefix') format('embedded-opentype'), url('#{$path}/#{$filename}.woff') format('woff'), url('#{$path}/#{$filename}.ttf') format('truetype'), url('#{$path}/#{$filename}.svg#icon') format('svg'); font-weight: $weight; font-style: $style; } }

Answer 7

U có thể thử mixin này cho font-face (font Proxima Nova như expl):

.fontFace(@fontWidth) { 
    @fontName: "Proxima Nova @{fontWidth}"; 
    @fileName: "../fonts/ProximaNova-@{fontWidth}"; 
    @font-face {   
     font-family: '@{fontName}'; 
     font-weight: 400; 
     font-style: normal; 
     src: url('@{fileName}.eot'); 
     src: url('@{fileName}.eot?#iefix') format('embedded-opentype'), 
      url('@{fileName}.woff') format('woff'), 
      url('@{fileName}.ttf') format('truetype'), 
      url('@{fileName}.svg#@{fontName}') format('svg'); 
    } 
} 

.fontFace('Regular'); 
.fontFace('RegularIt'); 
.fontFace('Bold'); 

@fontName: Proxima Nova; 
@font:   "@{fontName} Regular"; 
@font_italic: "@{fontName} RegularIt"; 
@font_bold:  "@{fontName} Bold"; 

h2 { 
    font: 400 50px @font_bold; 
} 

---

Và, như điều tương tự, nhân viên này tại Sass/SCSS:

@mixin font ($weight) { 
    @font-face { 
     $fontName: 'Proxima Nova ' + $weight; 
     $fileName: '../fonts/ProximaNova-' + $weight; 

     font-family: $fontName; 
     font-weight: 300; 
     font-style: normal; 
     src: url($fileName + '.eot '); 
     src: url($fileName + '.eot?#iefix') format('embedded-opentype'), 
      url($fileName + '.woff2') format('woff'), 
      url($fileName + '.ttf') format('truetype'), 
      url($fileName + '.svg##' + $fontName) format('svg'); 
    } 
} 
@include font(regular); 
@include font(bold); 
@include font(light); 

$fontName: 'Proxima Nova '; 
$font: $fontName + regular, "Helvetica Neue", sans-serif; 
$font_bold: $fontName + bold; 
$font_light: $fontName + light; 

h2 { 
    font: 300 15px $font_bold; 
}