Question

我们正在努力将前端模式库从HTML / CSS移植到Polymer / Web Components中。

在我们现有的代码库中，我们有一些字体缩放的页面级规则：

/**
 * HTML
 */
html {
    box-sizing: border-box;
    font-size: 62.5%;
}
/**
 * Body
 */
body {
    -webkit-font-smoothing: antialiased;
    font-family: "seravek-web";
    font-size: 1.6rem;
    line-height: 2.4rem;
}

@media only screen and (min-width: 1024px) {
    body {
        font-size: 1.8rem;
        line-height: 2.6rem;
    }
}

@media only screen and (min-width: 1360px) {
    body {
        font-size: 2rem;
        line-height: 2.8rem;
    }
}

或我们的显示字体混合的另一个示例（使用与纸张样式相同的方法，但使用媒体查询）

--font-display1: {
    /* @apply(--font-common-display) */
    font-family: "nimbus-sans-condensed";
    font-weight: bold;
    text-transform: uppercase;
    -webkit-font-smoothing: antialiased;
    /* @apply(--font-common-expensive-kerning); */
    text-rendering: optimizeLegibility;

    font-size: 8rem;
    line-height: 7.2rem;        
};

@media only screen and (min-width: 768px) {
    --font-display1: {
        /* @apply(--font-common-display) */
        font-family: "nimbus-sans-condensed";
        font-weight: bold;
        text-transform: uppercase;
        -webkit-font-smoothing: antialiased;
        /* @apply(--font-common-expensive-kerning); */
        text-rendering: optimizeLegibility;

        font-size: 12rem;
        line-height: 10.8rem;      
    };
}

保持这种全局字体缩放并应用于我们的整个组件套件的最佳方法是什么？

据我所知，随着Web组件封装的邪恶好处，降低了CSS级联和全局定义的CSS选择器和规则的代价。

我一直在专门挖掘https://github.com/PolymerElements repos https://github.com/PolymerElements/paper-styles，看看Google是否会对各种元素进行字体操作无效。

Answer 1

你指出隔离和级联是相互排斥的是正确的。在我以前的项目中，我们使用构建工具来隔离并创建了全局样式信息。

全局的一切都在构建级别处理。所有其他造型都采用聚合物提供的封装工具处理。

因此，如果您正在使用sass，那么所有项目的元素都可能利用全局字体变量。如果你正在使用第三方组件，你可以使用聚合物提供的注入机制注入你的字体变量（比如css数据包，或者今天他们称之为的任何内容）。

更新

请注意，如果您正在使用阴影dom，您仍然可以从/deep/ *选择器中获取milage。 IIRC已被弃用 - 目前还没有明确的选择。

如何使用Polymer 1.0

1 个答案: