Font Face Mixin pour moins
En utilisant Moins que je suis la définition de la police-famille:
@georgia: georgia, times, 'times new roman', 'nimbus roman no9 l', serif;
Puis-je avoir le moins de mixin:
.font(@family: arial, @size: 1.0em, @lineheight: 1.0, @weight: normal, @style: normal, @variant: normal) {
font: @style @variant @weight @size~"/"@lineheight @family;
} //font
Enfin je l'utilise comme ceci:
p {
.font(@georgia, 1.0em, 1.5)
}
Mais je tiens également à définir des familles de polices de caractères avec des polices personnalisées:
@something: 'custom-font', arial, ...;
Mais je dois d'abord vous inscrire personnalisé-police:
@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;
}
Est-il possible de créer un MOINS mixin pour @font-face
afin que je puisse passer le nom de la police et le chemin d'accès et le registre des polices sans répéter ce code?
Je ne suis pas sûr de la façon de l'intégrer à ma police mixin ...
Ou s'il y a une meilleure façon de le faire ...
Merci,
Miguel
source d'informationauteur Miguel Moura
Vous devez vous connecter pour publier un commentaire.
Vous pouvez définir votre personnalisé mixin, y compris pour les polices personnalisées, mais depuis MOINS de ne pas tout mettre en œuvre les directives de contrôle, seuls les gardes pour mixin (qui sont inutiles dans la question actuelle de l'aspect), vous ne peut pas raccourcir le mixin du code de la police-la définition du visage.
Je sais que c'est un vieux post MAIS j'ai résolu ce problème comme cela, j'espère que ça aide quelqu'un d'autre.
J'ai d'abord créé une représentation paramétrique mixin avec everythign que va répéter à l'intérieur de l' @font-face:
Ensuite chargé de toutes mes polices web (dans ce cas ouvrir sans)
Ensuite créé un deuxième paramétrique mixin avec la règle CSS à appliquer aux éléments
Et finalement je l'utilise sur mes éléments comme cette
Comme une note de côté. J'ai tous mes
*.eot
et*.woff
fichiers à côté de laLESS
fichier et désigné comme le@Local
paramètre (Open-Sans.woff
||Open-Sans.eot
)J'aime la structure de mes polices de caractères sur les dossiers, comme ceci:
Et je l'utilise MOINS MIXIN pour font-face:
Où:
Mixin appel exemple:
J'ai fait l' @pTheme variable donc je peux l'utiliser aussi sur les images d'arrière-plan, comme ceci:
MOINS en effet de prendre en charge l'mixin avec des paramètres. Voir ici: http://lesscss.org/#-parametric-mixins
U pouvez essayer ce mixin pour le type de police (police Proxima Nova comme expl):
Et, comme la même chose, ce personnel à SASS/SCSS:
Je sais que cette question est un peu vieux, mais j'ai couru avec Mészáros Lajos de réponse. Il avait besoin de compte pour quelques choses qu'il ne dispose pas actuellement de:
Voici mon interprétation pour le SASS, testé et de travail.
@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;
}
}