2014-08-29 6 views
0

클라이언트는 웹 사이트에서 현재 사용중인 글꼴의 숫자 모양이 마음에 들지 않으므로 숫자 글꼴 만 전환하려고합니다. 들어가서 각 숫자 집합을 감싸는 대신이 작업을 수행 할 수있는 비밀 의사 선택기가 있습니까? 대신 각 개별 번호 *의,숫자로만 글꼴을 지정 하시겠습니까?

str = str.replace(/([1234567890]+)/g,'<span class="num">$1</span>');

하지만 더 효율적으로, 그 숫자의 문자열을 감싸는 것 :처럼, JS를 사용하여

:numeric {font-family: Helvetica, sans-serif;}

또는 뭔가 : 같은? 이것이 왜 나쁜 생각일까요? 감사!

출처 : I got the javascript idea from this question

+2

빠른 질문 : 페이지가로드 된 맞춤 글꼴을 사용하고 있습니까? 그렇다면 글꼴을 직접 수정하는 것이 성능 향상에 도움이 될 수 있습니다 (더 이상 숫자를 구문 분석 할 필요가 없음). [FontForge] (http://fontforge.org/)로 한 번 해본 적이 있는데, 이해하는데 시간이 좀 걸리지 만, 몇 가지 튜토리얼을 읽고 나서 할 수있었습니다. – blex

+0

@blx : 좋은 생각. 유감스럽게도 typography.com에서이 파일을로드하고 있으므로 수정할 수있는 옵션이 없지만이를 명심해야합니다. –

답변

0

다음은 CSS를 해킹 할 필요가 작동이에 대한 순서로 jsfiddle http://jsfiddle.net/c11utd0w/ 입니다.

각 새 < li> 요소는 새로운 질문이므로 번호 매기기를 적용해야합니다. 그것은이처럼 간단합니다 : 당신은이 같은 마크 업이있을 것이다

.list { 
counter-reset: name-counter; 

list-style: none; 
margin:0; 
padding:0; 
} 

.list li:before { 
content: counter(name-counter); 
counter-increment: name-counter; 
font-size:20px; 
color:#ff0000; 
margin-right:20px; 
} 

:

<ol class="list"> 

<li>Aenean mauris risus?</li> 
<li>Suspendisse id ligula</li> 

<li>Cras sed dolor sit</li> 
<li>Ut suscipit</li> 

<li>Donec mattis</li> 
<li>Cras ultricies</li> 

</ol> 

는 IE7을 제외하고 (그리고 전에) 모든 주요 브라우저에서 괜찮아요. IE7은 : before/: after 의사 요소를 지원하지 않습니다.

하지만 IE7은 전세계 5 % 미만입니다. !!!!

관련 문제