"em"을 사용한 글꼴 크기 조정은 여전히 ​​관련이 있습니까?

"em"을 사용한 글꼴 크기 조정은 여전히 ​​관련이 있습니까?

---

글꼴의 크기를 조정할 때 em 을 사용 하는 사람들은 중첩 된 요소를 처리 할 때 골칫거리가 될 수 있으며 px- > em 계산 (디자인 해석이 100 %에서 올바른지 확인하기 위해)을 수행 해야하는 데 추가 시간이 소요된다는 것을 알 것입니다.

이러한 (사소한) 문제를 염두에두고 주요 브라우저가 페이지 크기 조정 / 확대 / 축소와 같은 접근성 문제를 기본적으로 처리하기위한 최근의 진전을 감안할 때 em 을 사용하여 글꼴 크기 를 조정하는 것이 여전히 가치있는 것으로 간주됩니까? *

* 레거시 브라우저 (IE6) 지원은 제외됩니다.

---

화면 스타일 시트에 절대 길이 단위로 글꼴 크기를 지정하지 마십시오. 플랫폼간에 일관되지 않게 렌더링되며 사용자 에이전트 (예 : 브라우저)로 크기를 조정할 수 없습니다. 고정되고 알려진 물리적 속성 (예 : 인쇄)을 가진 미디어에서 스타일링을 위해 이러한 단위를 계속 사용합니다.

이 방법을 사용하면 계산할 필요가 없습니다.

본문의 글꼴 크기를 62.5 % (즉, 기본값 인 16px의 62.5 %)로 설정할 수 있으며, 이는 10px 또는 0.625EM에 해당합니다. 이제 기억하기 쉬운 변환으로 EM에서 글꼴 크기를 설정하고 px를 10으로 나눌 수 있습니다.

* 12px = 1.2EMs
* 13px = 1.3EMs
* 16px = 1.6EMs
* 8px = 0.8EMs
* etc…

이것은 모든 것을 기억하기 쉽게 만들고 변환 표의 필요성을 제거합니다. 물론, CSS에서 구체적이지 않은 경우 EM을 사용할 때 중첩 된 요소에 대한 변환 테이블을 사용해야합니다. 이는 완전히 별개의 문제입니다.

그러나 76 %가 훨씬 더 좋으며 이것을 사용하여 http://pxtoem.com/ 을 계산할 수 있습니다 .

예, 여전히 관련이 있습니다.

IE6는 여전히 널리 사용되고 있으며 px에 정의 된 글꼴의 크기를 조정할 수 없습니다. => 사용성 문제. 그것만으로는 안됩니다.

과

IE 7과 8은 실제로 픽셀 크기의 텍스트 크기를 조정하지 않습니다. 페이지 확대 / 축소 기능이 있지만 일부 사람들은 텍스트 크기 만 늘리는 것을 선호합니다.

다음은 일반적으로 글꼴 크기 조정의 장점과 단점에 대한 요약입니다.

CSS의 글꼴 크기 http://easycaptures.com/fs/uploaded/213/2470522253.png

나는 개인적으로 ems를 좋아한다. CSS-Tricks.com의 Chris Coyier와 같은 다른 사람들은 픽셀을 좋아합니다. ( Chris는 다양한 글꼴 단위에 대한 훌륭한 기사를 가지고 있습니다.)

그것은 정말로 개인적인 취향에 달려 있습니다.

SO에 대한 거의 유사하거나 관련된 질문

웹 사이트 요소의 글꼴 크기를 정의하기 위해 여전히 em과 %를 사용해야합니까?

CSS에서 상대적인 글꼴 크기를 사용하는 것이 실제로 의미가 있습니까?

왜 px 대신 em?

CSS의 글꼴 크기-% 또는 em?

CSS 글꼴 크기 : 상대 값과 절대 값. 어느 것을 사용해야합니까?

EM 문제

CSS에서 고정 크기 대신 상대 사용

px에서 em에 대한 유용한 온라인 도구

http://pxtoem.com/

http://riddle.pl/emcalc/

http://convert-to.com/pixels-px-to-em-conversion.html

전체 사이트를 px에서 em으로 변환 (이 도구는 아직 개발 중)

http://converter.elementagency.com/

EM 계산기 AIR 응용 프로그램 (모든 OS에서 작동)

http://jameswhittaker.com/journal/em-based-layouts-vertical-rhythm-calculator/

http://jameswhittaker.com/projects/apps/em-calculator-air-application/

Windows 앱

http://www.thebrightlines.com/2009/11/16/pixem-pixel-to-em-converter/

http://www.storkas.com/Projects.aspx (아래로 이동)

CSS 용 픽셀에서 Ems 로의 변환 표

http://jontangerine.com/silo/css/pixels-to-ems/

http://reeddesign.co.uk/test/points-pixels.html

emchart

http://aloestudios.com/tools/emchart/

http://aloestudios.com/code/emchart/

이 문제에 대한 추가 기사

http://www.d.umn.edu/itss/support/Training/Online/webdesign/type.html

---

나는 과거에 전체 확대 / 축소 가능한 사이트를 구축했습니다. 사실 내 회사 사이트 ( http://kingdesk.com )의 모든 차원 은 em 기반입니다. 최근의 모든 작업에서 나는 네 가지 이유로 그러한 관행을 포기했습니다.

1. EM 유지 보수는 전혀 문제가되지 않습니다. 초기 디자인 중에 중첩 된 요소에 대해 수학을 올바르게하는 것은 한 가지이지만, 시간이 지난 후 방향을 다시 지정하는 것은 부담 스럽습니다. 즉, em-zooming 효과를 없애는 대신 고정 된 단위를 넣는 것입니다.
2. 브라우저는 지난 2 년 동안 먼 길을 걸어 왔습니다. 모든 주요 브라우저의 현재 버전은 기본적으로 페이지 확대 / 축소를 지원합니다.
3. 이러한 사이트는 IE6에서 시각 장애가있는 사용자가 쉽게 액세스 할 수 없지만이 문제를 해결하는 무료 도구가 풍부합니다. 합리적인 대안이 없다면 나는 그들의 필요를 촉진 할 도덕적 의무가 있습니다. 정문에 4 개의 ADA 접근 가능 경사로가있는 경우 단계를 시연하지 않고 5 단계로 교체하지 않습니다.
4. 디자인 시간을 20 % 절약 할 수 있다고 생각합니다.

지금은 고정 된 단위로만 디자인하고 한 번도 문제 나 불만이 없었습니다.

아, 궁금 하시다면 더 이상 IE6에서 사이트를 완벽하게 보이게 만들려고하지 않습니다. 그들은 여전히 ​​탐색이 가능하고 괜찮은 모습입니다. 그러나 시간이 흐르고 9 년 된 브라우저가 주목을받습니다.

---

Richard Rutter의 "A List Apart"에 게시 된이 기사는 여전히 관련이 있습니다.

CSS에서 텍스트 크기를 조정하는 방법 http://www.alistapart.com/articles/howtosizetextincss/

반복을 보면 알 수 있습니다.

픽셀 단위의 텍스트 크기 – 반복 1

그 결과 Safari와 Firefox는 여전히 텍스트 크기를 조정하지만 IE6과 IE7은 그렇지 않습니다. 페이지 레이아웃, 텍스트 및 이미지를 확대하는 페이지 확대 / 축소 도구를 사용하여 Opera 및 IE7에서 텍스트 크기를 조정할 수 있습니다.

ems의 텍스트 크기 – 반복 2

결과는 모든 브라우저에서 중간 브라우저 설정의 텍스트가 픽셀 단위로 설정된 텍스트와 동일하게 렌더링된다는 것을 보여줍니다. 또한 ems로 크기가 조정 된 텍스트는 모든 브라우저에서 크기를 조정할 수 있음을 보여줍니다. 그러나 IE6 및 IE7은 크기가 조정 된 텍스트의 크기가 작거나 크다는 것을 용납 할 수 없을 정도로 과장합니다.

백분율로 표시된 본문 – 반복 3

결과는 IE6 및 IE7에서 더 큰 브라우저 설정과 더 작은 브라우저 설정의 차이가 이제 덜 뚜렷하다는 것을 보여줍니다. 즉, 이제 모든 브라우저가 중간 설정에서 동일한 크기로 텍스트를 렌더링하고 텍스트 크기를 일관되게 조정할 수 있습니다.

픽셀 단위의 행 높이 설정 – 반복 4

결과는 18px 줄 높이가 페이지의 모든 텍스트에 의해 상속됨을 보여줍니다 .... 불행히도 결과는 텍스트 크기를 조정할 때 18px 줄 높이가 IE6 및 IE7에 의해 조정되지 않음을 보여줍니다. 즉, 가장 큰 설정이 찌그러진 것처럼 보입니다. 텍스트.

ems에서 줄 높이 설정 – 반복 5

결과는 모든 브라우저에서 정확하고 일관되게 크기가 조정 된 텍스트와 줄 높이를 보여줍니다. 완전한. 아니면 거의 그렇습니다.

Safari 고정 폭 문제 – 반복 6

결과는 Safari 2의 고정 폭 텍스트를 포함하여 모든 브라우저에서 일관되게 크기가 조정 된 텍스트와 줄 높이를 보여줍니다.

이 기사는 2007 년으로 작성되었지만 여전히 관련성이 높습니다. 글꼴 크기를 설정하는 것은 단순히 em (또는 px)을 설정하는 것 이상입니다.

---

정말로 %를 의미 할 때 em을 사용하지 마십시오. em이 작동 하는 유일한 이유 는 CSS 1em에서 문자 "M"( em 은 "M"에서 나옴)의 크기를 나타내는 것으로 가정하는 것이 실제로 글꼴 크기와 동일하기 때문입니다. 따라서 1em을 작성할 때 실제로 " 상속 된 글꼴 크기의 100 %"를 작성하는 것 입니다. em은 글꼴 크기에 상대적인 상자 크기를 지정할 때 사용하기위한 것입니다.

"브라우저에서 크기를 조정할 수 없습니다"라는이 구멍은 브라우저의 텍스트 크기 조정이 프런트 엔드 기능이었고 따라서 여전히 일부 진실이 있었던 석기 시대로 거슬러 올라가는 현대 신화 입니다.

ems를 사용하면 내 레이아웃이 마술처럼 깨지지 않습니까? 물론 아닙니다, 그것은 단지 희망적인 생각입니다!

최신 브라우저는 텍스트 확대 / 축소를 제공합니까?

간단히 말해서 기본적으로는 아닙니다. 브라우저는 기본적으로 페이지 확대 / 축소를 제공하며 일반적으로보기 아래에있는 메뉴 표시 줄 깊숙이 묻혀 있습니다. 일부 사용자는 단축키 Ctrl + MouseWheel을 알고 있지만 실제 텍스트 확대 / 축소가 더 까다로울 수 있습니다. 메뉴 바를 없애는 현대적인 경향 (참고 :이 글을 쓰는 시점에서 FF4 베타도 기본적으로 제거됨)으로 인해 텍스트 확대 / 축소가 필요한 사용자가 실제로 필요한 사용자임을 고려해야 합니다.. I say this because the trend of tutorials/advice on the net is to simply glorify elastic layout and being able to re-size text but not really the issue. Sadly too many "professionals" in elastic/em/fluid layouts completely miss the point: site should look okey if I zoom to 300% or higher! If it just looks good at things like 130% or 170% that's completely pointless and waste of effort and only really useful when they were stupid enough to set their base font to something like 10px or lower (way too small for large bodies of text).

The other issue is "some browsers don't zoom", out of those IE6 is the only relevant one, because it still holds some small share of the internet. If you think otherwise, you've probably been reading some articles from 2002 or so (ie. 1 years after it's introduction), wake up to reality:

• Is your audience using IE6 and does not know any better? Unless you have some statistic backing, assume: NO. Also, should you design for IE6 first? The answer is always: hell NO. Design in the most technically advanced, comprehensive, and standards compliant browser you can find. Usually the tug-of-war is between Safari and Opera. Firefox is not really that far behind but typically implements them as -moz- rules and is slow at converting to non -moz- rules.

• What are the chances of someone who is using IE6 to actually know of font-size tools? If in doubt assume Zero. What are the chances of people actually using IE6 (in our day and age) care for font-size of all things? If in doubt assume Zero.

• If you do happen to have IE6 users one innocent thing you can do is give them a informative push in the right direction, discretely. Example: "Your browser, Internet Explorer 6, contains numerous security flaws. For your safety and that of your company assets you are encouraged to upgrade (or ask your administrator to upgrade) to a newer version: http://www.microsoft.com/nz/windows/internet-explorer/default.aspx (it's absolutely free!)"

It may also be useful to know the current trend (as per sites like Google) is kill IE6 asap! You are by no means being professional by supporting this cursed browser from almost a decade ago, along with other monstrosities such as IE5.5. Before reading advice in web design, check the date.

How to use various font sizes

• pt ("points") is the size for print, and only print! A point is defined as 1/72 of a inch and roughly 0.3527 mm. Never ever use pt for screen styles because the browser will have to guess; and a lot of browsers are really awful at guessing! A pica is 12pt.

  I wish there was a polite way to say this, but any time you see points used for screen style (be it a online reset script, vanilla script, etc.) the author was a idiot. Even one simple proof-view should have shown the point measurement is off.

• ex (abbreviation of "x-height") is a CSS fancy unit which if you're lucky you might never ever use.

• px ("pixel") is the more precise cross-browser AND cross-platform consistent unit there is. While your browser can not know exactly how tall (in mm/inches) a screen is, pixel perfect precision is pretty easy. User pixels in setting (base-)font sizes for screen display of various key elements, in particular when those elements are pixel perfect themselves. A simple example: text on a image. Even if you use only em or % values in your entire code you are still relying on a 16px base set by the browser (when displaying for screen).

• % is the relative size. Use % whenever you just mean to say: this many times bigger/smaller then the parent. It can be used as a base and thus the style in theory could be used for both screen and print and other media. But (and this is just my own opinion) you probably want to create a separate style for each media where at the very least you set the most appropriate base font-size and family for that particular medium. It is hardly "too much work".

• em (as in "M") refers to the size of the letter M, and is a typography measurement (like point), but in CSS it is simply equal to the font-size, when dealing with screen. If you are dealing with print, god knows if it won't just revert to the typographically correct "size of M" instead of "size of typeface" (remember CSS is not just for screen). It is most appropriate to use a em when specifying a dimension for the enclosing box relative to the text. Use it only when you can't use %, as a percentage is more clearer and better code in general.

• named sizes: xx-small, x-small, small, normal, large, etc., should be avoided! You might notice though experimentation that "small" is practically 12px or 75%, but a lot crisper. However, they are inconsistent cross-browser. Small in Firefox is smaller then small in Safari, so never ever use them.

Rule of thumb: always write what you mean in the context with the most concise syntax.

---

The real question: how do I give my users the ability to resize text

User who need bigger text are users with poor vision. Poor vision should not be confused with being totally blind when text is of a certain size. Given how wide the types of eye problems are, typically offering a small increase in size such as say 130% or 160% or so, is just no where near enough. You are just trying to be fancy, and it doesn't work at all!

What you want is to give your users the ability to resize the text they wish to read. And the recommendation is to offer a simple A/A (2nd "A" should be smaller; complementing it with text such as "normal", "2x larger", etc., is useful). Place this somewhere visible, the most common position is in the right top corner of the content the user wishes to read. The context of "content" is very important:

• Users care only for what they want they want to read. They are not totally blind, and you upping the base font-size is not exactly "curing blindness". If you have a title of 50px, yes they probably can see it fine, no need to make it 150px! You can very easily put the font-size switch on the article and have it affect only the body and that will work out great!

• Make your site navigation user friendly; if you need a magic switch to make that text bigger for some of your users to read then you probably need to make it bigger by default! Note: a interface that is meant to be used over and over such as a control panel is less affected since your users only have to put on their glasses and read that fine-print one time, but should still be largely easily accessible by all. (I'm referring to techniques of making destructive actions hard to accidentally click, which take precedence over such issues)

If you must make your entire site "elastic" (ie. dynamic based on font-size)

• first and foremost make sure if the user was to use one of the browsers No Style or Accessibility Style features (see: Opera) your site looks at least somewhat decent. Users with actual problems (and not just fooling around) are more likely to use those then try to resize immediately.

• Next make sure you have a visible switch for resizing text. Modern browsers don't resize text by default, don't assume your users are going to change those defaults.

• When users use the switch make sure different levels tweak the titles and various other elements. Make sure everything gets bigger, but make things like titles only grow slightly so they don't just fill the entire screen (assume the users windows is not maximized).

• Then, can you worry about every other headache envolved with elastic layout.

• Though all this analyze the line-height and make sure to pick a value that scales gracefully for your increments and typeface.

Note: extremely large font sizes are not the rare ones, its the other way around. Typically the preferred sizes are 12px (don't have anything lower for base, ever!), 16px and just monster large.

---

Although allowed, I've always felt it's a little nonsensical to size your fonts using em. When used for font sizing, it's a relative measure, and I think it just adds confusion to your CSS. If you really mean to give your font a size relative to it's parent font size, use percents. (font-size: 0.8em is equivalent to font-size: 80%, but the percent is more sensical.)

Otherwise use one of the absolute units. Browsers handle and scale them fine now.

---

Ems are very relevant for keeping your layout in proportion. 1em is, in digital typography, the size of the design space for each letter and is equivalent to the point size of the font, e.g. if the current font is 12pt then 1em is 12pt.

Percentages and Ems are not interchangeable - whilst it may or may not be preferable to specify a font-size relative to the parent as 80% rather than 0.8em, for example, the same doesn't hold true for anywhere else. If I want a 1em margin around an element that's entirely different from specifying 100%, which in that case would be relative to the amount of space the element occupies.

Specifying absolute units will throw the design into chaos. If a user chooses to enlarge their font, some browsers may not scale the text - and nor should they, pixel size should be independent of point size. There is also the issue that if you use relative sizes for fonts and absolute sizes for other measurements then your design will probably die a horrible death, so you should therefore specify all measurements relatively where possible, which means using ems. Browsers that confuse "enlarge font size" with "magnify this web page" on the grounds that "the user wants to see everything bigger and it will keep the page how the designer intended" are wrong, no matter how helpful it may seem. It's things like that which caused HTML to be such a huge mess in the first place.

I also don't see the merit in specify a body font-size of 62.5% - whilst it may make measurements easier because 1em = 10px, there are a couple of problems. First, you are still technically working in pixels, and secondly it assumes that the user's default font-size is 16px. If you rely on this ratio anywhere in your layout (such as matching image sizes), your design may suffer should the user have a different default font size, and if you are not relying on it and everything is relative then the font-size doesn't matter because everything will scale to match.

So yes, ems are still worthwhile.

---

Sizing fonts in ems doesn't really make much sense, because 1 em is the font size, by definition.

Sizing other elements in ems is critical, because it means that when you decide to change the font size, you don't end up completely hosing all your margins, padding, and other layout aspects.

---

I never use pixel sizes for fonts in any program (except Photoshop I suppose, since it just had it in pixels by default). I've always used point size (such as in Word) and have since moved to scaling relatively in CSS with em. I set the body font-size then scale using em.

Maybe I'm just used to knowing how big point sizes are on screen and in print. I can never guess the size of a pixel font height so I don't use it.

참고URL : https://stackoverflow.com/questions/2058550/is-sizing-fonts-using-em-still-relevant