Is there a browser API that tells me preferences (font family, font size, size of focus, etc.) applied to the browser?

huangapple go评论63阅读模式
英文:

Is there a browser API that tells me preferences (font family, font size, size of focus, etc.) applied to the browser?

问题

I'm wondering if there are APIs to know preferences users applied to the browser, such as font-size, font-family, etc.

I wrote this question because I've been asked to apply browser preferences to my HTML page. For example, if the user has poor sight and an enlarged browser font size, I want to apply that size to my web page.

My goal is something like this:

document.getElementById("myBodyTag").style.fontSize = browser.getCurrentFont()

where 'browser' is the API I'm looking for.

EDIT:
The real reason I'm looking for this API is because the client of my project, reading the technical reference of the European Union Accessibility Law, stated that my web application must inherit the platform settings, as you can read in the pic below.
Is there a browser API that tells me preferences (font family, font size, size of focus, etc.) applied to the browser?

英文:

I'm wondering if there are APIs to know preferences users applied to browser, such as font-size, font-family, etc.

I wrote this question because I've been asked to apply browser preferences to my HTML page. For example, if user has poor sight and enlarged browser font size, I want to apply that size to my web page.

My goal is something like this:

document.getElementById("myBodyTag").style.fontSize = browser.getCurrentFont()

where 'browser' is the API I'm looking for.

EDIT:
The real reason I'm looking for this API is because the client of my project, reading the technical reference of the European Union Accessibility Law, stated that my web application must inherit the platform settings, as you can read in the pic below.
Is there a browser API that tells me preferences (font family, font size, size of focus, etc.) applied to the browser?

In my opinion they didn't get correctly what the document says, because there's an unclear bond between rules to be applied to web pages and rules to be applied to software.

答案1

得分: 1

不确定您的意思,但是window.getComputedStyle用于获取用户在浏览器中设置的当前偏好。类似这样(尝试修改浏览器字体样式设置然后重新运行代码段):

const nativeStyle = getComputedStyle(document.documentElement);

console.log(`Document font: ${nativeStyle.fontFamily} ${nativeStyle.fontStyle} ${nativeStyle.fontSize}`);
英文:

Not sure if this is what you mean, but window.getComputedStyle for a (not in any way modified) document gives you the current preferences a user has set for his/her browser. Something like (try modifiying your browser font style settings and rerun the snippet):

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->

const nativeStyle = getComputedStyle(document.documentElement);

console.log (`Document font: ${nativeStyle.fontFamily} ${
  nativeStyle.fontStyle} ${nativeStyle.fontSize}`);

<!-- end snippet -->

答案2

得分: 1

以下是翻译好的部分:

  • 对于许多事情,你不需要直接读取用户设置,而是让它们在需要的地方隐式应用。
  • 让我们以 font-size 和焦点大小(我猜你指的是 outline)为例。如果你使用相对单位,理想情况下是 rem,来定义文本和应该与文本一起缩放的元素,那么你就可以适应用户在浏览器设置中选择的字体大小。如果他从设置中将字体大小从16px更改为20px,你在rems中定义的文本和其他元素的尺寸也会随之缩放。
  • 谈到 font-family 和可访问性,我不确定用户定义它是否有多大意义。作为网页作者,你必须知道哪种字体在你的网站上的上下文中有意义并且效果最好。如果你想要实现可访问性,只需选择标准字体如 Times New Roman 和 Arial,就可以了。
  • 说到这一点,如果你真的想应用用户设置,你可以这样做:
font-family: initial;
font-size: initial;

这将应用用户浏览器中配置的字体和大小。

如果你还想以编程方式找出它们的默认值,你可以创建一些虚拟元素,在其上设置一些初始样式,如:

font-family: initial;
font-size: initial;

然后调用:

getComputedStyle($0).fontFamily

当然,你可以以这种方式读取的浏览器设置数量是有限的。

PS:如果你需要更多信息,那么这就变成了道德(了解用户太多信息)和实际问题(为什么你甚至需要它)的问题。

英文:

For many things you don't need to read user settings directly, but rather let them be applied implicitly where needed.

Let's take the font-size and the focus size (I guess you meant outline) as an example. If you define your text, and elements that should scale with text, in relative units, ideally rem, you are all set to adapt the font size that user picked in his browser settings. If he changes font size from 16px to 20px in settings, your text, and other elements' dimensions defined in rems, will scale with it.

Speaking of font-family and a11y, I am not sure it makes much sense for users to define it. You as the web author have to know which font makes sense in context of your site and works the best. If you wanna be accessible, just choose standard fonts like Times New Roman and Arial and you'll be fine.

That said, if you really want to apply user settings, you can do so:

font-family: initial;
font-size: initial;

This will apply the font and size configured in user's browser.

If you also want to find out programmatically about their defaults, you can create some dummy element, set some initial styles on it like:

font-family: initial;
font-size: initial;

and call:

getComputedStyle($0).fontFamily

Of course, the amount of browser settings you can read this way is limited.

PS: If you'd need more, then this turns into ethical (knowing too much about the user) and practical question (why would you even need it).

huangapple
  • 本文由 发表于 2023年5月13日 16:27:22
  • 转载请务必保留本文链接:https://go.coder-hub.com/76241785.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定