입력의 모든 문자에 대해 동일한 너비

Question

입력이 5 개인 것처럼 보이도록 스타일이 지정되어 있습니다. 그것은 오직 문자 ([az]와) 내가하고 싶은 무엇

모든 문자가이

처럼 그 방지하는 일에 중앙에 오도록 해당 입력의 다섯 글자를 같은 폭을 줄입니다 받아

이 은 어쩌면이 플러그인을하려고 지금

input { 
    min-height: 0; 
    min-width: 0; 
    font-size: 2em; 
    line-height: 1.4; 
    letter-spacing: 1.18em; 
    text-align: left; 
    padding: 0 0 0 0.55em; 
    display: block; 
    position: relative; 
    width: 6em; 
} 

input::after { 
    content: attr(data-content); 
    display: block; 
    position: absolute; 
    left: 0; 
    top: 0; 
    right: 0; 
    bottom: 0; 
    padding-left: .55em; 
} 

Answer 1

는 고정 폭 폰트를 사용한다. 그러나 Courier는 최악의 선택이기 때문에 사용하지 마십시오. 오래된 시스템에서는 비트 맵 글꼴 일 수도 있습니다 (따라서 몇 가지 글꼴 크기로만 허용됩니다). 실제로 현대 Windows 시스템에서 Courier라는 이름은 Courier New를 말합니다 (시스템에 Courier가 실제로 설치되어 있지 않은 경우). 다소 좋지만 의심 스럽습니다.

가 부분적으로 font survey에 따라, 나는 다음을 제안 :

이

input { font-family: Consolas, Monaco, Lucida Console, monospace } 

일반 이름 monospace 시스템의 기본 고정 폭 글꼴이 사용된다는 것을 의미합니다. Android에서는 기본적으로 사용할 수있는 유일한 모노 스페이스 글꼴 인 Droid Mono를 의미합니다.

Answer 2

이 입력에 대한 CSS입니다 : https://github.com/davatron5000/Lettering.js

예 : @HeikoRupp하여 주석에 제시된 바와 같이 http://jsfiddle.net/krMhR/