Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Demonstrate how to use local fonts for styling #55

Merged
merged 2 commits into from
Oct 13, 2020
Merged

Demonstrate how to use local fonts for styling #55

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8f5e742
font styling example is more complete
oyiptong Oct 13, 2020
9ec6ebd
comments about postscriptName uniqueness, plus correct escaping in sp…
oyiptong Oct 13, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
33 changes: 25 additions & 8 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -115,31 +115,48 @@ Font enumeration can help by enabling:
Advanced creative tools may wish to use CSS to style text using all available local fonts. In this case, getting access to the local font name can allow the user to select from a richer set of choices:

```js
const fontSelect = document.createElement("select");
fontSelect.onchange = e => {
console.log("selected:", fontSelect.value);
// Use the selected font to style something here.
};

document.body.appendChild(fontSelect);

(async () => { // Async block
const status = await navigator.permissions.query({ name: "font-access" });
if (status.state === "denied")
throw new Error("Cannot continue to style with local fonts");

const exampleText = document.createElement("p");
exampleText.id = "exampleText";
exampleText.innerText = "The quick brown fox jumps over the lazy dog";
exampleText.style.fontFamily = "dynamic-font";

const textStyle = document.createElement("style");
const fontSelect = document.createElement("select");
fontSelect.onchange = e => {
console.log("selected:", fontSelect.value);
// An example of styling using @font-face src: local matching.
textStyle.textContent = `
@font-face {
font-family: "dynamic-font";
src: local("${postscriptName}");
}`;
};

try {
// May prompt the user:
for await (const metadata of navigator.fonts.query()) {
const option = document.createElement("option");
option.text = metadata.fullName;
// postscriptName works well as an identifier of sorts.
// It is unique as returned by the API, the OpenType spec expects
// it to be in ASCII, and it can be used by @font-face src: local
// matching to be used to style elements.
option.value = metadata.postscriptName;
fontSelect.append(option);
}
document.body.appendChild(textStyle);
document.body.appendChild(exampleText);
document.body.appendChild(fontSelect);
} catch(e) {
// Handle error. It could be a permission error.
throw new Error(e);
}
}
})();
```

Expand Down
35 changes: 26 additions & 9 deletions index.bs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -157,27 +157,44 @@ Advanced creative tools may wish to use CSS to style text using all available lo
The following code populates a drop-down selection form element with the available local fonts, and could be used as part of the user interface for an editing application.

```js
const fontSelect = document.createElement("select");
fontSelect.onchange = e => {
console.log("selected:", fontSelect.value);
// Use the selected font to style something here.
};

document.body.appendChild(fontSelect);

(async () => { // Async block
const status = await navigator.permissions.query({ name: "font-access" });
if (status.state === "denied")
throw new Error("Cannot continue to style with local fonts");

const exampleText = document.createElement("p");
exampleText.id = "exampleText";
exampleText.innerText = "The quick brown fox jumps over the lazy dog";
exampleText.style.fontFamily = "dynamic-font";

const textStyle = document.createElement("style");
const fontSelect = document.createElement("select");
fontSelect.onchange = e => {
console.log("selected:", fontSelect.value);
// An example of styling using @font-face src: local matching.
changeFontStyle(fontSelect.value);
textStyle.textContent = \`
@font-face {
font-family: "dynamic-font";
src: local("${postscriptName}");
}\`;
};

try {
// May prompt the user:
for await (const metadata of navigator.fonts.query()) {
const option = document.createElement("option");
option.text = metadata.fullName;
// postscriptName works well as an identifier of sorts.
// It is unique as returned by the API, the OpenType spec expects
// it to be in ASCII, and it can be used by @font-face src: local
// matching to be used to style elements.
option.value = metadata.postscriptName;
fontSelect.append(option);
}
document.body.appendChild(textStyle);
document.body.appendChild(exampleText);
document.body.appendChild(fontSelect);
} catch(e) {
// Handle error. It could be a permission error.
throw new Error(e);
Expand Down Expand Up @@ -430,7 +447,7 @@ A {{FontMetadata}} provides details about a font face. Each {{FontMetadata}} has
<div class="domintro note">

: |metadata| . {{FontMetadata/postscriptName}}
:: The PostScript name for the font. Example: "`Arial-Bold`"
:: The PostScript name for the font. Example: "`Arial-Bold`". The OpenType spec expects this to be encoded in a subset of ASCII and is unique for |metadata|

: |metadata| . {{FontMetadata/fullName}}
:: The full font name, including family subfamily names. Example: "`Arial Bold`"
Expand Down