가장 휴대 가능하고 시각적으로 만족스러운 솔루션은를 사용하는 것 text-shadow
입니다. 이것은 Alexxali 와 내 자신의 조정을 사용하여 Thorgeir의 답변의 예를 수정하고 보여줍니다 .
li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
이렇게 black
하면 글꼴 렌더링과 함께 적절하게 크기가 조정되는 단위를 사용하여 각 문자의 양쪽 에 작은 "그림자"가 검은 색 ( 필요한 경우 대신 글꼴의 색상 이름 / 코드 사용)으로 표시됩니다.
경고 : px
값은 십진수 값을 지원하지만 글꼴 크기가 변경 될 때 (예 : 사용자가 Ctrl++ . 대신 상대 값을 사용하십시오.
이 답변은 ex
글꼴에 따라 크기가 조정되므로 단위의 분수를 사용합니다 .
~ 대부분의 브라우저 기본값 * 에서 1ex
≈을 예상 8px
하므로 0.025ex
≈ 0.1px
.
직접 확인 :
li { color: #000; } /* set text color just in case */
.shadow0 { text-shadow: inherit; }
.shadow2 { text-shadow: -0.02ex 0 #000, 0.02ex 0 #000; }
.shadow4 { text-shadow: -0.04ex 0 #000, 0.04ex 0 #000; }
.shadow6 { text-shadow: -0.06ex 0 #000, 0.06ex 0 #000; }
.shadow8 { text-shadow: -0.08ex 0 #000, 0.08ex 0 #000; }
.bold { font-weight: bold; }
.bolder { font-weight: bolder; }
.after span { display:inline-block; font-weight: bold; } /* workaholic… */
.after:hover span { font-weight:normal; }
.after span::after { content: attr(title); font-weight: bold; display:block;
height: 0; overflow: hidden; }
.ltrsp { letter-spacing:0; font-weight:bold; } /* @cgTag */
li.ltrsp:hover { letter-spacing:0.0125ex; }
li:hover { font-weight: normal!important; text-shadow: none!important; }
<li class="shadow0">MmmIii123 This line tests shadow0 (plain)</li>
<li class="shadow2">MmmIii123 This line tests shadow2 (0.02ex)</li>
<li class="shadow4">MmmIii123 This line tests shadow4 (0.04ex)</li>
<li class="shadow6">MmmIii123 This line tests shadow6 (0.06ex)</li>
<li class="shadow8">MmmIii123 This line tests shadow8 (0.08ex)</li>
<li class="after"><span title="MmmIii123 This line tests [title]"
>MmmIii123 This line tests [title]</span> (@workaholic…)</li>
<li class="ltrsp" >MmmIii123 This line tests ltrsp (@cgTag)</li>
<li class="bold" >MmmIii123 This line tests bold</li>
<li class="bolder" >MmmIii123 This line tests bolder</li>
<li class="shadow2 bold">MmmIii123 This line tests shadow2 (0.02ex) + bold</li>
<li class="shadow4 bold">MmmIii123 This line tests shadow4 (0.04ex) + bold</li>
<li class="shadow6 bold">MmmIii123 This line tests shadow6 (0.06ex) + bold</li>
<li class="shadow8 bold">MmmIii123 This line tests shadow8 (0.08ex) + bold</li>
렌더링 된 선 위로 마우스를 가져 가면 표준 텍스트와 어떻게 다른지 확인할 수 있습니다.
브라우저의 확대 / 축소 수준 변경 ( Ctrl+ +및 Ctrl+- )을 차이를 확인합니다.
비교를 위해 여기에 두 가지 다른 솔루션을 추가했습니다 : @cgTag의 글자 간격 트릭 ( 글꼴 너비 범위 추측과 관련이 있기 때문에 잘 작동하지 않음)과 @ workaholic_gangster911의 :: after drawing 트릭 ( 굵은 텍스트가 확장 될 수 있도록 어색한 추가 공간을 남깁니다) 인접한 텍스트 항목을 뉘우 치지 않고 (저는 굵은 텍스트 뒤에 속성을 넣어서 어떻게 움직이지 않는지 볼 수 있습니다).
미래에, 우리는 더 할 것이다 변수 글꼴 변경 같은 것들을 할 수있는 글꼴 등급을 통해를 font-variation-settings
. 브라우저 지원 이 증가하고 있지만 (Chrome 63+, Firefox 62+) 여전히 표준 글꼴 이상이 필요하며이를 지원하는 기존 글꼴은 거의 없습니다.
가변 글꼴을 삽입하면 다음과 같이 CSS를 사용할 수 있습니다.
/* Grade: Increase the typeface's relative weight/density */
@supports (font-variation-settings: 'GRAD' 150) {
li:hover { font-variation-settings: 'GRAD' 150; }
}
/* Failover for older browsers: tiny shadows at right & left of the text
* (replace both instances of "black" with the font color) */
@supports not (font-variation-settings: 'GRAD' 150) {
li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }
}
Mozilla Variable Fonts Guide에 다양한 등급으로 플레이 할 수있는 슬라이더 가있는 라이브 데모 가 있습니다. 웹의 가변 글꼴에 대한 Google의 소개 에는 높은 등급과 등급 없음 사이의 전환을 보여주는 애니메이션 GIF가 있습니다.