ДЕРЗОСТЬ и @font-face
Если вы знаете точную позицию, будет работать исключение из всех следующих братьев :nth-child().
ul li:not(:nth-child(n+3))
Что бы выбрать все li s до третьего (например, 1-го и 2-го) , Но, по-моему, это выглядит уродливым и очень плотным.
Вы также можете выбрать n-й-правый справа налево:
ul li:nth-child(-n+2)
Что делает то же самое .
2 ответа
На случай, если кому-то интересно - вероятно, это был мой css ...
@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')
будет отображаться как
@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'); }
, что кажется достаточно близким ... просто нужно проверить рендеринг SVG
Для тех, которые ищут смешивание SCSS вместо этого, включая woff2:
@mixin fface($path, $family, $type: '', $weight: 400, $svg: '', $style: normal) {
@font-face {
font-family: $family;
@if $svg == '' {
// with OTF without SVG and EOT
src: url('#{$path}#{$type}.otf') format('opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype');
} @else {
// traditional src inclusions
src: url('#{$path}#{$type}.eot');
src: url('#{$path}#{$type}.eot?#iefix') format('embedded-opentype'), url('#{$path}#{$type}.woff2') format('woff2'), url('#{$path}#{$type}.woff') format('woff'), url('#{$path}#{$type}.ttf') format('truetype'), url('#{$path}#{$type}.svg##{$svg}') format('svg');
}
font-weight: $weight;
font-style: $style;
}
}
// ========================================================importing
$dir: '/assets/fonts/';
$famatic: 'AmaticSC';
@include fface('#{$dir}amatic-sc-v11-latin-regular', $famatic, '', 400, $famatic);
$finter: 'Inter';
// adding specific types of font-weights
@include fface('#{$dir}#{$finter}', $finter, '-Thin-BETA', 100);
@include fface('#{$dir}#{$finter}', $finter, '-Regular', 400);
@include fface('#{$dir}#{$finter}', $finter, '-Medium', 500);
@include fface('#{$dir}#{$finter}', $finter, '-Bold', 700);
// ========================================================usage
.title {
font-family: Inter;
font-weight: 700; // Inter-Bold font is loaded
}
.special-title {
font-family: AmaticSC;
font-weight: 700; // default font is loaded
}
$type параметр полезен для укладки связанных семейств с различными весами.
Эти @if происходит из-за потребности поддержки шрифт Интера (подобный Roboto), который имеет OTF, но не имеет SVG и типов EOT в это время.
, Если Вы добираетесь , не может решить ошибка, не забыть проверять Ваш каталог ($dir).