Re: [csswg-drafts] [css-fonts] Propose adding lang as a font-face descriptor (#1744)

I agree that the `:lang()` selector solution is compelling, but I see a couple potential issues with it. The most common use case is embedding some text from another language within a page that's mostly in one language. But in this use case, if we don't use the star selector, then font-family is computed on the element to which it's applied, so the following slight modification of @drott's example doesn't have the expected behavior in Firefox 63 or Chrome 70 ([Codepen link](https://codepen.io/anon/pen/zMepOY)):
```
<div lang="a" class="myclass">
  a (shows in cursive)
  <div lang="b">
    b (shows in sans-serif)
  </div>
</div>
```
```
@font-face {
  font-family: Pacifico;
  src: url(//fonts.gstatic.com/s/pacifico/v12/FwZY7-Qmy14u9lezJ-6H6MmBp0u-.woff2)
}

@font-face {
  font-family: Roboto;
  src: url(//fonts.gstatic.com/s/roboto/v18/KFOmCnqEu92Fr1Mu4mxKKTU1Kg.woff2)
}

:root :lang(a) {
  --site-font-family: Pacifico;
}

:root :lang(b) {
  --site-font-family: Roboto;
}

.myclass {
  font-family: var(--site-font-family);
  font-size: 50px;
}
```
Also, I think using CSS custom properties as a surrogate for font family is a little hacky, but perhaps that's fine. To include both serif and sans-serif Noto CJK fonts in a page we would have to something like this:
```
@font-face { font-family: NotoSansTC; src: url(NotoSansTC-Light.otf); }
@font-face { font-family: NotoSansJP; src: url(NotoSansJP-Light.otf); }
:root :lang(zh) { --NotoSans-Light-font-family: NotoSansTC; }
:root :lang(ja) { --NotoSans-Light-font-family: NotoSansJP; }

@font-face { font-family: NotoSerifTC; src: url(NotoSerifTC-Light.otf); }
@font-face { font-family: NotoSerifJP; src: url(NotoSerifJP-Light.otf); }
:root :lang(zh) { --NotoSerif-Light-font-family: NotoSerifTC; }
:root :lang(ja) { --NotoSerif-Light-font-family: NotoSerifJP; }

.my-sans-text {
  font-family: var(--NotoSans-Light-font-family);
}
.my-serif-text {
  font-family: var(--NotoSerif-Light-font-family);
}
```

-- 
GitHub Notification of comment by kahsieh
Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/1744#issuecomment-443455931 using your GitHub account

Received on Saturday, 1 December 2018 20:26:41 UTC