CSS Mediaqueries:在最小到最大范围内定义字体-此字体是否加载到外部? [英] CSS Mediaqueries: Defining font-face inside a certain min to max range - is this font loaded outside?

问题描述

可能是一个奇怪的问题，在您回答之后，我可能会因提出这个问题而感到羞愧.

Probably a weird question and after your answers I might be ashamed for asking this.

我的网站上嵌入了一种特定的字体(通过@font-face)，该字体用于仅在较宽的分辨率(桌面)上可见的部分.例如，在智能手机上，此部分不可见(display:none).

I have a specific font embedded on my website (via @font-face) this font is used for a section that is only visible on wider resolutions (desktops). On Smartphones for example, this section is not visible (display:none).

@font-face规则未在媒体查询中定义，而是在样式表的开头.

The @font-face rule is not defined within a media-query but right at the beginning of my stylesheet.

我现在想知道，如果我正在移动设备上查看网站，是否可以避免加载此嵌入式字体文件.

I wonder now if it would be possible to avoid loading this embedded font-file if I'm viewing the site on a mobile device.

你知道的.字体文件的视图为kb，我希望我的网站尽可能快.由于我的移动版本甚至不需要该字体，所以我想知道

You know. The font-file has a view kb and I want my site to be as fast as possible. Since the font wouldn't even be needed on my mobile version I wonder if

1.)字体现在是否被加载?我不知道如何在我的iPhone上进行测试.由于使用它的部分设置为display:none，所以我没有任何反馈.

1.) the font is even loaded at the moment? I have no idea how to test this on my iPhone. Since the section where it is used is set to display:none I don't get any feedback.

2.)如果已加载(我猜是这样)，则可以在media-query中使用max-width设置该@font-face声明:640px(例如iPhone)，并且文件不会在这种情况下可以加载?

2.) If it is loaded (and I guess so) would it be possible to set this @font-face declaration inside a media-query with max-width : 640px (e.g. iPhone) and the files wouldn't be loaded in this case?

关于此事有什么想法吗?

Any ideas on that matter?

先谢谢您.

推荐答案

似乎可行.没在IE的较早版本中进行过测试(我正在使用modernizr等在较旧的brosers中提供媒体查询支持)，但是它可能有效.

It seems to work. Didn't test it in older Versions of IE (I'm using modernizr, etc. for media-query support in older brosers) but it might work.

我在需要它的mediaquery内部直接定义了@font-face规则.我在所有现代浏览器上进行了测试.如果浏览器窗口很小并且没有触发媒体查询，则没有请求.一旦我将窗口调整为更大的尺寸(需要字体)，就会加载该窗口.

I'm defining the @font-face rule directly inside the mediaquery where it is needed. I tested it with all modern browsers. There is no request if the browser window is very small and the media-query isn't triggered. Once I resize the window to a larger with (where I need the font) it is loaded.

就是我想要的.

这篇关于CSS Mediaqueries:在最小到最大范围内定义字体-此字体是否加载到外部?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！