我想為用戶提供自己選擇整個應用程式字體大小的選項。我的問題是我不知道如何在運行時全域更改字體大小。我已經嘗試在 global.css 中添加一個類：
...
* {
font-size: large; //that works
}
...
.large-font {
font-size: large; //that doesn't work
...
但這不起作用，因為我也不知道哪些是實際的 HTMLElement，其中的字體大小必須更改。
這是我的 (ionChange)-Event 函式的當前版本：
onSelectFontSize() {
const app = Array.from(
document.querySelectorAll('*') as unknown as HTMLCollectionOf<HTMLElement>
);
console.log('app: ', app);
// eslint-disable-next-line @typescript-eslint/prefer-for-of
for (let i = 0; i < app.length; i ) {
app[i].style.setProperty('font-size', '96px !important');
}
}
我正在使用 ionic 6 Angular 14，在這些技術方面擁有近 2 個月的經驗。我已經在堆疊溢位中嘗試過其他解決方案。
先感謝您
uj5u.com熱心網友回復：
以下是 Ionic React 的示例（因為我使用的是 React，而不是 Angular），但基本原理應該是相同的。
Ionic 6 廣泛使用 CSS 變數。所以我的解決方案是將字體大小變數添加到variables.css：
:root {
/* https://developer.apple.com/design/human-interface-guidelines/ios/visual-design/typography/ */
--app-text-size-base: 1.25rem; /* Assumes 16px base size. */
--app-text-size-title: calc(var(--app-text-size-base) * 1.2); /* 24px */
--app-text-size-title-h1: calc(var(--app-text-size-base) * 1.3); /* 26px */
--app-text-size-title-h2: calc(var(--app-text-size-base) * 1.2); /* 24px */
--app-text-size-title-h3: calc(var(--app-text-size-base) * 1.1); /* 22px */
--app-text-size-title-h5: calc(var(--app-text-size-base) * 0.9); /* 18px */
--app-text-size-title-h6: calc(var(--app-text-size-base) * 0.8); /* 16px */
/* iOS default big size */
--app-text-size-small: calc(var(--app-text-size-base) * 0.85); /* 17px */
--app-text-size-half: calc(var(--app-text-size-base) * 0.5); /* 10px */
--app-text-size-half-negative: calc(var(--app-text-size-half) * -1); /* -10px */
在一些地方，Ionic 采用了固定的字體大小，所以我不得不進行各種調整；在這里看到text.scss我的要點。
完成后，您可以使用一個簡單的函式來設定 CSS 變數（React TypeScript 示例）：
const setThemeTextSize = (newTextSize: string): void => {
const root = document.querySelector(':root') as HTMLElement;
if (root) {
root.style.setProperty('--app-text-size-base', `${newTextSize}px`);
}
};
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/505900.html
標籤：javascript 有角度的 离子框架 离子6