Использование процента для размера шрифта?

Недавно я прочитал немного о том, как изменить размер шрифтов, большинство из них высмеивает, используя px как непростительное преступление (хорошо, может быть, не так уж плохо, вы понимаете), потому что оно не изменяет размер в старых браузерах.

Я действительно хочу иметь стандарт, который я использую сам, в прошлом, который был px, просто потому, что он прост, понятен и довольно легко достигнет точных размеров шрифта, которые указаны в дизайне, - но я теперь сомневаясь в использовании px.

Я использовал em в проекте недавно, потому что ему нужны функции изменения текста, которые я создал с помощью jQuery. Но я счел это довольно расстраивающим из-за того, что em усиливается, если у вас есть два элемента внутри друг друга, как с указанным размером em (надеюсь, что это имеет смысл)

Итак, мне было интересно, как использовать% для изменения размера шрифта, я видел, что несколько больших сайтов используют эту технику (а именно Yahoo), и из того, что я понимаю, похоже, что у нее есть все преимущества em без невероятно раздражающего усилие.

Короче говоря, мне просто интересно, есть ли проблемы с использованием% для размер шрифта в CSS? Было бы лучше, чем использование PX с точки зрения изменения размера шрифта? И есть ли заметные сокращения?

Извиняется, если вопрос до вопроса немного:/Я по-прежнему привык ко всему предмету QA

Ответ 1

В CSS3 используйте rem (root em). На размер не влияет размер em родительского элемента.

Ответ 2

попробуйте использовать

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

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

поэтому, когда вы говорите что-то вроде 1em внутри "обертки", у вас будет размер, очень похожий на 10px. здесь пример таблицы:

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

Это поможет вам в переходе

P.d: конечно, вам понадобится тег обертки после тела

Ответ 3

Стандарт в веб-дизайне, насколько я испытал это, - это использовать процент, чтобы установить размер шрифта в теле, а затем использовать ems для изменения размера шрифта после этого. Вы можете использовать проценты за пределами тега тела без каких-либо неблагоприятных побочных эффектов, но я думаю, что многие разработчики находят, что им легче работать (любой может проверить меня на этом).

Опасность возникает, если вы используете ems для установки размера шрифта тела; старые браузеры задыхаются и неправильно отображают текст, особенно при увеличении.

Ответ 4

Там есть плагин jQuery под названием FitText. Он изменяет размер текста по процентам. Если посетитель по какой-то причине отключил 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 );

Ответ 5

Возможно, это будет иметь смысл сделать font-resize script. Я сделал script, который сделал именно то, что вы хотите, но я не могу найти его больше.

Псевдо-код:

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;

Так объяснено словами. script должен изменить размер некоторых шрифтов, когда это будет сделано, он также будет искать некоторые родительские divs для изменения размера этих шрифтов, кроме того, что они будут изменены на 10% меньше, чем присущие ему. С некоторым недоумением вы получите правильное преобразование. Также старайтесь избегать прокладки и ширины границ.