Вы можете использовать оба. Стиль css переопределит атрибут size
в браузерах, поддерживающих CSS, и сделает поле правильной шириной, а для тех, кто этого не сделает, он вернется к указанному числу символов.
Редактировать : Я должен был упомянуть, что атрибут size
не является точным методом калибровки: в соответствии со спецификацией HTML , он должен ссылаться на количество символов текущий шрифт, который будет отображаться сразу.
Однако, если указанный шрифт не является шрифтом с фиксированной шириной / моношириной, это not гарантирует, что указанное количество символов будет фактически видимым; в большинстве шрифтов разные символы будут различной ширины. В этом вопросе есть некоторые хорошие ответы, связанные с этой проблемой.
В приведенном ниже фрагменте показаны оба подхода.
@font-face {
font-family: 'Diplomata';
font-style: normal;
font-weight: 400;
src: local('Diplomata'), local('Diplomata-Regular'), url(https://fonts.gstatic.com/s/diplomata/v8/8UgOK_RUxkBbV-q561I6kFtXRa8TVwTICgirnJhmVJw.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
@font-face {
font-family: 'Open Sans Condensed';
font-style: normal;
font-weight: 300;
src: local('Open Sans Condensed Light'), local('OpenSansCondensed-Light'), url(https://fonts.gstatic.com/s/opensanscondensed/v11/gk5FxslNkTTHtojXrkp-xBEur64QvLD-0IbiAdTUNXE.woff2) format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215;
}
p {
margin: 0 0 10px 0;
}
input {
font-size: 20px;
}
.narrow-font {
font-family: 'Open Sans Condensed', sans-serif;
}
.wide-font {
font-family: 'Diplomata', cursive;
}
.set-width {
width: 220px;
}