글꼴 크기에 퍼센트를 사용 하시겠습니까?

Question

최근에 글꼴 크기를 조정하는 방법에 대한 간단한 정보를 읽었습니다. 그 중 대부분은 px를 용서할 수없는 범죄로 사용하는 것을 비웃었습니다 (예, 좋지 않다고 생각하지 않습니다.). 구형 브라우저에서는 크기가 제대로 조정되지 않기 때문에.

과거에 px였던 표준을 가지고 싶습니다. 간단하고 이해하기 쉬우 며 디자인에 지정된 정확한 글꼴 크기를 쉽게 달성 할 수 있기 때문입니다. 이제는 px를 사용하는 것에 의문을 느낍니다.

jQuery를 사용하여 만든 텍스트 크기 조정 기능이 필요하기 때문에 최근에 프로젝트에서 em을 사용했습니다. 하지만 당신이 서로 em의 크기가 지정된 두 가지 요소가있는 경우 em이 증폭되는 방식 때문에 상당히 좌절했습니다.

글꼴 크기 조정에 %를 사용하는 것에 대해 궁금합니다. 몇 가지 큰 웹 사이트에서이 기술 (즉, 야후)을 사용하는 것을 보았습니다. 그리고 내가 이해하는 바에 따르면 엄청나게 짜증나는 증폭 작업 없이는 모든 장점을 가진 것처럼 보입니다.

요약하면 CSS에서 글꼴 크기 조정에 %를 사용하는 데 문제가 있는지 궁금합니다. 글꼴 크기 조정 측면에서 PX를 사용하는 것보다 낫지 않습니까? 그리고 눈에 띄는 무승부가 있습니까?

죄송 질문하기 전에 선전 조금 많은 경우 :/난 아직 가지 어쩌면이 폰트 사이즈 변경 스크립트를 만드는 더 의미를 만들 것입니다 전체 QA 일

Answer 1

에 익숙해. 나는 당신이 원하는 것을 정확히 한 스크립트를 만들었지 만, 더 이상 찾을 수 없다.

의사 코드 :

var fontSize = 15; // (em) input 
var fontResize = -1;// (em)input 
fontSize = fontSize+fontResize; //current div 

for(every inherent parent classname == 'classname-em') 
document.classnameParentSize[numberofclass] = classnameChildSize[numberOfClass]/100*90; 

그래서 말로 설명했다. 스크립트는 일부 글꼴 크기를 조정해야합니다. 글꼴 크기를 조정해야 할 부모 div도 일부러 찾습니다. 단, 글꼴 크기의 고유 한 크기보다 10 % 작게 조정됩니다. 일부 수수께끼로 당신은 올바른 전환을해야합니다. 또한 패딩과 테두리 너비를 피하십시오.

Answer 2

FitText이라는 jQuery 플러그인이 있습니다. 퍼센트를 기준으로 텍스트의 크기를 조정합니다. 어떤 이유로 방문자가 JavaScript를 사용할 수 없게되면 정상적으로 표시되기 때문에 적절한 PX 또는 EM 백업을 설정하십시오.

jQuery에 따라 다르므로 페이지에 추가해야합니다 (아직없는 경우). 참조

---

jquery.fittext.js :

/*global jQuery */ 
/*! 
* FitText.js 1.0 
* 
* Copyright 2011, Dave Rupert http://daverupert.com 
* Released under the WTFPL license 
* http://sam.zoy.org/wtfpl/ 
* 
* Date: Thu May 05 14:23:00 2011 -0600 
*/ 

(function($){ 

    $.fn.fitText = function(kompressor, options) { 

     var settings = { 
     'minFontSize' : Number.NEGATIVE_INFINITY, 
     'maxFontSize' : Number.POSITIVE_INFINITY 
     }; 

      return this.each(function(){ 
       var $this = $(this);    // store the object 
       var compressor = kompressor || 1; // set the compressor 

     if (options) { 
      $.extend(settings, options); 
     } 

     // Resizer() resizes items based on the object width divided by the compressor * 10 
       var resizer = function() { 
        $this.css('font-size', Math.max(Math.min($this.width()/(compressor*10), parseFloat(settings.maxFontSize)), parseFloat(settings.minFontSize))); 
       }; 

       // Call once to set. 
       resizer(); 

       // Call on resize. Opera debounces their resize by default. 
     $(window).resize(resizer); 

      }); 

    }; 

})(jQuery); 

Answer 3

당신이 "래퍼"내부 1em 같은 것을 말할 때, 그래서이

body { 
    margin: 0px; 
    padding: 0px; 
    font-size: 62.5%; 
} 

body>#wrapper { 
    font-size:1em; 
} 

를 사용하려고하면 매우 유사한 크기를해야합니다 10px. 이 전환

P.에 도움이 될 것입니다

3em == 30px 
.5em == 5px 
8.5em == 85px 

: 여기에 예를 표입니다d : 물론, 본문 뒤에 래퍼 태그가 필요합니다.

Answer 4

웹 디자인의 표준은 백분율을 사용하여 본문의 글꼴 크기를 설정 한 다음 ems를 사용하여 변경합니다. 그 후 글꼴 크기 조정. body 태그 밖의 퍼센트를 부작용없이 사용할 수는 있지만, 많은 개발자가 작업하기가 더 쉽다고 생각합니다. 누구든지이 태그를 자유롭게 확인할 수 있습니다.

em을 사용하여 본문 글꼴 크기를 설정하면 위험합니다. 구식 브라우저는 특히 확대 할 때 텍스트를 숨기고 잘못 표시합니다.

Answer 5

CSS3에서는 rem (루트 em)을 사용하십시오. 사이징은 부모 요소의 크기에 영향을받지 않습니다.