定义CSS @ Font-Face粗斜体 [英] Defining CSS @Font-Face bold italic

问题描述

我正在一个项目中，我正在使用六个粗细/样式的字体.这些包括:常规，斜体，半粗体，半粗体斜体，粗体和粗体斜体.我有@ font-face标签设置(理论上)，它们应该显示的方式.但是实际情况是，粗体总是斜体.是否有必要声明这些粗体和斜体权重，以便它们可以正常工作?我不想在各处都使用不同的字体系列名称.理想情况下，我应该能够声明正确的粗细和样式并获得正确的字体版本.

I am working on a project where I six weights/styles of the font I am working with. These include: regular, italic, semibold, semibold italic, bold and bold italic. I have the @font-face tags setup (in theory) the way they should show. What happens in reality however is that the bold is always italic. Is there anyway to declare these bold + italic weights so that they will work properly? I don't want to call different font-family names all over the place. Ideally I should just be able to declare the right weight and style and get the right version of the font.

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

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-bolditalic-webfont.eot');
    src: url('agaramondpro-bolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-bolditalic-webfont.woff') format('woff'),
         url('agaramondpro-bolditalic-webfont.ttf') format('truetype');
    font-weight: bold;
    font-style: italic, oblique;
    }

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

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

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

    @font-face {
    font-family: 'AdobeGaramondPro';
    src: url('agaramondpro-semibolditalic-webfont.eot');
    src: url('agaramondpro-semibolditalic-webfont.eot?#iefix') format('embedded-opentype'),
         url('agaramondpro-semibolditalic-webfont.woff') format('woff'),
         url('agaramondpro-semibolditalic-webfont.ttf') format('truetype');
    font-weight: 600;
    font-style: italic, oblique;
    }

有什么想法可以实现这一目标吗?

Any ideas to make that work?

推荐答案

这可能不是您要查找的技术答案，但是为什么您需要使用三个权重(正则，半负和粗体，放在一边斜体字)?

This probably isn't technical answer you're looking for exactly, but why do you need to use three weights (reg, semi and bold, leave aside the italics for now)?

您可能会发现这些权重之间的对比度不足以保证在一页中使用这三个权重.您想使用字体的不同粗细来在布局中创建不同的层次结构；两个权重，再加上大小，大小写以及颜色的变化，就足够了.

You might find that the contrast between those weights isn't great enough to warrant using all three within one page. You want to use different weights of a font to create distinct levels of hierarchy in your layout; two weights, in combination with changes in size, capitalisation and maybe colour should be enough.

权重范围很宽的字体可能包括以下字体:发际线；瘦;光;常规的;中等的;半粗体;大胆的;黑色的;较重(每个均带有斜体).该频谱的最末端绝对不能用于设置较长的文本块，而只能用于较大的显示尺寸或顶级标题中.然后，您将在主体文本的浅"和粗体"位置之间选择两个权重，在大多数情况下，请选择至少相隔两个位置的权重-浅"和中"或常规"和粗体"以获取足够的对比度.太多的对比度会破坏沉浸式阅读.例如，不要将"Light"与"Bold"配对.

A typeface with a wide range of weights might include these fonts: Hairline; Thin; Light; Regular; Medium; Semibold; Bold; Black; Heavy (with italic versions of each). The extreme ends of that spectrum should never be used for setting long blocks of text, but only in large display sizes or top level headlines. You would then pick two weights between, say, the Light and Bold positions for your main body text, in most cases choosing weights at least two positions apart – Light and Medium, or Regular and Bold – to get enough contrast. Too much contrast would be disruptive to immersive reading; don't pair Light with Bold for example.

如果您出于特殊目的需要额外的中间粗细(例如，您可能在深色背景上设置了白色文本，那么半粗体将是不错的选择)，那么您可以创建一个单独的类以供偶尔使用，同时将字体家族声明中的四个常规粗体和斜体样式链接为正常样式.

If you need the extra in-between weight for a special purpose (for example, you might have white text set against a dark background, so a semi bold would be good) then you could create a separate class for that occasional use, while style-linking the four conventional weights and italics in the font-family declaration as normal.

这篇关于定义CSS @ Font-Face粗斜体的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！