CSS: ทำให้ข้อความบางส่วนเป็นตัวหนาโดยไม่ต้องเปลี่ยนขนาดของคอนเทนเนอร์

ฉันมีเมนูนำทางแนวนอนซึ่งโดยพื้นฐานแล้วเป็นเพียง<ul>องค์ประกอบที่ตั้งไว้เคียงข้างกัน ฉันไม่ได้กำหนดความกว้าง แต่เพียงแค่ใช้ช่องว่างภายในเพราะฉันต้องการให้ความกว้างถูกกำหนดโดยความกว้างของรายการเมนู ฉันทำให้รายการที่เลือกในปัจจุบันเป็นตัวหนา

ปัญหาคือในการทำตัวหนาคำจะกว้างขึ้นเล็กน้อยซึ่งทำให้องค์ประกอบที่เหลือเลื่อนไปทางซ้ายหรือขวาเล็กน้อย มีวิธีที่ชาญฉลาดในการป้องกันไม่ให้สิ่งนี้เกิดขึ้นหรือไม่? มีบางอย่างตามบรรทัดของการบอกช่องว่างภายในโดยไม่สนใจความกว้างพิเศษที่เกิดจากตัวหนา? ความคิดแรกของฉันคือเพียงแค่ลบพิกเซลไม่กี่พิกเซลออกจากส่วนขยายขององค์ประกอบที่ "ใช้งานอยู่" แต่จำนวนนี้จะแตกต่างกันไป

ถ้าเป็นไปได้ฉันต้องการหลีกเลี่ยงการตั้งค่าความกว้างคงที่ในแต่ละรายการจากนั้นให้จัดกึ่งกลางเมื่อเทียบกับโซลูชันการขยายช่องว่างที่ฉันมีอยู่ในปัจจุบันเพื่อให้การเปลี่ยนแปลงในอนาคตเป็นเรื่องง่าย

ฉันมีปัญหาเดียวกัน แต่ได้ผลที่คล้ายกันโดยมีการประนีประนอมเล็กน้อยฉันใช้ text-shadow แทน

li:hover {text-shadow:0px 0px 1px black;}

นี่คือตัวอย่างการทำงาน:

body {
  font-family: segoe ui;
}

ul li {
  display: inline-block;
  border-left: 1px solid silver;
  padding: 5px
}

.textshadow :hover {
  text-shadow: 0px 0px 1px black;
}

.textshadow-alt :hover {
  text-shadow: 1px 0px 0px black;
}

.bold :hover {
  font-weight: bold;
}

<ul class="textshadow">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 0px 0px 1px black;</code></li>
</ul>

<ul class="textshadow-alt">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>text-shadow: 1px 0px 0px black;</code></li>
</ul>

<ul class="bold">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li><code>font-weight: bold;</code></li>
</ul>

ตัวอย่าง jsfiddle

โซลูชันการทำงานที่ดีที่สุดโดยใช้ :: after

HTML

<li title="EXAMPLE TEXT">
  EXAMPLE TEXT
</li>

CSS

li::after {
  display: block;
  content: attr(title);
  font-weight: bold;
  height: 1px;
  color: transparent;
  overflow: hidden;
  visibility: hidden;
}

เพิ่มองค์ประกอบหลอกที่มองไม่เห็นด้วยความกว้างของข้อความตัวหนาที่มาจากtitleแอตทริบิวต์

text-shadowวิธีการแก้ปัญหามีลักษณะแปลกประหลาดบน Mac และไม่ได้ใช้ทุกความงามว่าข้อความที่แสดงผลเกี่ยวกับข้อเสนอ Mac .. :)

http://jsfiddle.net/85LbG/

เครดิต: https://stackoverflow.com/a/20249560/5061744

text-shadowวิธีการแก้ปัญหาแบบพกพามากที่สุดและสายตาที่ชื่นชอบที่จะใช้ สิ่งนี้ทบทวนและแสดงตัวอย่างคำตอบของ Thorgeirโดยใช้Alexxaliและการปรับแต่งของฉันเอง:

  li:hover { text-shadow: -0.06ex 0 black, 0.06ex 0 black; }

สิ่งนี้ทำให้ "เงา" เล็ก ๆ เป็นสีดำ (ใช้ชื่อ / รหัสสีของแบบอักษรแทนblackหากจำเป็น) ทั้งสองด้านของตัวอักษรแต่ละตัวโดยใช้หน่วยที่ปรับขนาดได้อย่างเหมาะสมด้วยการแสดงผลแบบอักษร

คำเตือน: pxค่าต่างๆรองรับค่าทศนิยม แต่จะดูไม่ดีนักเมื่อขนาดฟอนต์เปลี่ยนไป (เช่นผู้ใช้ปรับขนาดมุมมองด้วยCtrl+ +) ใช้ค่าสัมพัทธ์แทน

คำตอบนี้ใช้เศษส่วนของexหน่วยเนื่องจากปรับขนาดตามแบบอักษร
ในที่สุด ~ ค่าเริ่มต้นของเบราว์เซอร์*คาดว่า1ex≈ 8pxและดังนั้นจึง≈0.025ex0.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's :: หลังจากวาดเคล็ดลับซึ่งทำให้มีช่องว่างเพิ่มขึ้นอย่างน่าอึดอัดเพื่อให้ข้อความที่เป็นตัวหนาสามารถขยายได้ โดยไม่ต้องเขยิบรายการข้อความใกล้เคียง (ฉันใส่การระบุแหล่งที่มาหลังข้อความตัวหนาเพื่อให้คุณเห็นว่าข้อความนั้นไม่เคลื่อนไหวอย่างไร)

ในอนาคตเราจะมีมากขึ้นแบบอักษรตัวแปรความสามารถในสิ่งที่ต้องการเปลี่ยนเกรดอักษร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 แบบเคลื่อนไหวที่แสดงการสลับระหว่างเกรดสูงและไม่มีเกรด

ฉันพบว่าฟอนต์ส่วนใหญ่มีขนาดเท่ากันเมื่อคุณปรับระยะห่างของตัวอักษรทีละ 1px

a {
   letter-spacing: 1px;
}

a:hover {
   font-weight: bold;
   letter-spacing: 0px;
}

แม้ว่าสิ่งนี้จะเปลี่ยนแบบอักษรปกติเพื่อให้ตัวอักษรแต่ละตัวมีระยะห่างพิกเซลเพิ่มเติม สำหรับเมนูชื่อเรื่องสั้นมากจนไม่เป็นปัญหา

สำหรับคำตอบที่เป็นปัจจุบันคุณสามารถใช้-webkit-text-stroke-width:

.element {
  font-weight: normal;
}

.element:hover {
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

วิธีนี้จะหลีกเลี่ยงองค์ประกอบหลอก (ซึ่งเป็นข้อดีสำหรับโปรแกรมอ่านหน้าจอ) และเงาข้อความ (ซึ่งดูยุ่งเหยิงและยังสามารถสร้างเอฟเฟกต์ "กระโดด" ได้เล็กน้อย) หรือตั้งค่าความกว้างคงที่ (ซึ่งอาจทำไม่ได้)

นอกจากนี้ยังช่วยให้คุณสามารถตั้งค่าองค์ประกอบให้มีความโดดเด่นกว่า 1px (ตามหลักวิชาแล้วคุณสามารถสร้างแบบอักษรให้เป็นตัวหนาได้ตามต้องการและอาจเป็นการออกกำลังกายแบบห่วย ๆ สำหรับการสร้างแบบอักษรตัวหนาที่ไม่มีตัวหนา ตัวแปรเช่นแบบอักษรที่กำหนดเอง ( แก้ไข: แบบอักษรตัวแปรทำให้คำแนะนำนี้ไม่เห็นคุณค่า ) แม้ว่าจะควรหลีกเลี่ยงสิ่งนี้เนื่องจากอาจทำให้แบบอักษรบางส่วนมีลักษณะเป็นรอยและหยัก)

ฉันใช้งานได้แน่นอนใน Edge, Firefox, Chrome และ Opera (ในขณะที่โพสต์) และใน Safari ( แก้ไข: @Lars Blumberg ขอบคุณที่ยืนยัน ) ไม่ทำงานใน IE11 หรือต่ำกว่า

นอกจากนี้โปรดทราบว่ามันใช้-webkitคำนำหน้าดังนั้นสิ่งนี้จึงไม่เป็นมาตรฐานและการสนับสนุนอาจลดลงในอนาคตดังนั้นอย่าพึ่งพาสิ่งนี้ว่าตัวหนาเป็นสิ่งสำคัญจริงๆ - ควรหลีกเลี่ยงเทคนิคนี้เว้นแต่จะเป็นเพียงความสวยงามเท่านั้น

น่าเสียดายที่วิธีเดียวที่จะหลีกเลี่ยงการเปลี่ยนแปลงความกว้างเมื่อข้อความเป็นตัวหนาคือการกำหนดความกว้างของรายการอย่างไรก็ตามตามที่คุณระบุไว้การทำด้วยตนเองนั้นใช้เวลานานและไม่สามารถปรับขนาดได้

สิ่งเดียวที่ฉันคิดได้คือการใช้จาวาสคริปต์ที่คำนวณความกว้างของแท็บก่อนที่จะเป็นตัวหนาจากนั้นจึงใช้ความกว้างในเวลาเดียวกันต้องใช้ตัวหนา (ไม่ว่าจะเมื่อคุณวางเมาส์หรือคลิก)

ใช้ JavaScript เพื่อตั้งค่าความกว้างคงที่ของ li ตามเนื้อหาที่ไม่มีการพับตัวหนาจากนั้นทำให้เนื้อหาเป็นตัวหนาโดยใช้สไตล์กับ<a>แท็ก (หรือเพิ่มช่วงหาก<li>ไม่มีลูก)

นี่เป็นคำถามเก่ามาก แต่ฉันกำลังทบทวนอีกครั้งเพราะฉันมีปัญหานี้ในแอพที่ฉันกำลังพัฒนาและพบคำตอบทั้งหมดที่ต้องการ

(ข้ามย่อหน้านี้สำหรับ TL; DR ... )ฉันใช้ Gotham webfont จาก cloud.typography.com และฉันมีปุ่มที่เริ่มกลวง (ด้วยขอบ / ข้อความสีขาวและพื้นหลังโปร่งใส) และรับสีพื้นหลังเมื่อวางเมาส์เหนือ ฉันพบว่าสีพื้นหลังบางสีที่ฉันใช้นั้นไม่ได้ตัดกับข้อความสีขาวได้ดีนักดังนั้นฉันจึงต้องการเปลี่ยนข้อความเป็นสีดำสำหรับปุ่มเหล่านั้น แต่ - ไม่ว่าจะเป็นเพราะเคล็ดลับภาพหรือวิธีการลบรอยหยักทั่วไป - มืด ข้อความบนพื้นหลังสีอ่อนมักจะมีน้ำหนักเบากว่าข้อความสีขาวบนพื้นหลังสีเข้ม ฉันพบว่าการเพิ่มน้ำหนักจาก 400 เป็น 500 สำหรับข้อความสีเข้มจะคงน้ำหนัก "ภาพ" เกือบเท่ากันทุกประการ อย่างไรก็ตามมันเพิ่มความกว้างของปุ่มเป็นจำนวนเล็กน้อย - เพียงเศษเสี้ยวของพิกเซล - แต่ก็เพียงพอที่จะทำให้ปุ่มดู "กระวนกระวาย" เล็กน้อยซึ่งฉันต้องการกำจัด

สารละลาย:

เห็นได้ชัดว่านี่เป็นปัญหาที่จู้จี้จุกจิกมากดังนั้นจึงต้องมีวิธีแก้ปัญหาที่จู้จี้จุกจิก ในที่สุดฉันก็ใช้ค่าลบletter-spacingกับข้อความที่โดดเด่นกว่าตามที่ cgTag แนะนำไว้ข้างต้น แต่ 1px น่าจะเกินความจำเป็นดังนั้นฉันจึงคำนวณความกว้างที่ฉันต้องการเท่านั้น

จากการตรวจสอบปุ่มใน Chrome devtools ฉันพบว่าความกว้างเริ่มต้นของปุ่มของฉันคือ 165.47px และ 165.69px บนโฮเวอร์ความแตกต่าง 0.22px ปุ่มนี้มี 9 อักขระดังนั้น:

0.22 / 9 = 0.024444px

ด้วยการแปลงหน่วยเป็น em ฉันสามารถทำการปรับขนาดตัวอักษรได้โดยไม่เชื่อเรื่องพระเจ้า ปุ่มของฉันใช้ขนาดตัวอักษร 16px ดังนั้น:

0.024444 / 16 = 0.001527em

ดังนั้นสำหรับตัวอักษรโดยเฉพาะอย่างยิ่งของฉันต่อไปนี้ CSS ช่วยให้ปุ่มตรงความกว้างเท่ากันเมื่อวางเมาส์เหนือ:

.btn {
  font-weight: 400;
}

.btn:hover {
  font-weight: 500;
  letter-spacing: -0.001527em;
}

ด้วยการทดสอบเพียงเล็กน้อยและใช้สูตรข้างต้นคุณจะพบletter-spacingค่าที่เหมาะสมกับสถานการณ์ของคุณและควรใช้งานได้ไม่ว่าขนาดตัวอักษรจะเป็นเท่าใด

ข้อแม้ประการหนึ่งคือเบราว์เซอร์ที่แตกต่างกันใช้การคำนวณพิกเซลย่อยที่แตกต่างกันเล็กน้อยดังนั้นหากคุณต้องการความแม่นยำที่สมบูรณ์แบบพิกเซลย่อยระดับ OCD นี้คุณจะต้องทำการทดสอบซ้ำและตั้งค่าที่แตกต่างกันสำหรับแต่ละเบราว์เซอร์ โดยทั่วไปแล้วสไตล์ CSS ที่กำหนดเป้าหมายของเบราว์เซอร์จะถูกมองข้ามด้วยเหตุผลที่ดี แต่ฉันคิดว่านี่เป็นกรณีการใช้งานอย่างหนึ่งที่เป็นตัวเลือกเดียวที่เหมาะสม

คำถามที่น่าสนใจ ฉันคิดว่าคุณใช้โฟลตใช่ไหม?

ฉันไม่รู้เทคนิคใด ๆ ที่คุณสามารถใช้เพื่อกำจัดการขยายแบบอักษรนี้ได้ดังนั้นพวกเขาจะพยายามทำให้พอดีกับความกว้างขั้นต่ำที่ต้องการ - และความหนาของตัวอักษรที่แตกต่างกันจะเปลี่ยนค่านี้

ทางออกที่ไม่เหมือนใครที่ฉันรู้เพื่อหลีกเลี่ยงการเปลี่ยนแปลงนี้คือวิธีที่คุณบอกว่าคุณไม่ต้องการ: การตั้งค่าขนาดคงที่เป็นของ li

คุณสามารถใช้สิ่งนี้ได้เช่นเมนูโฮเวอร์ "ช็อปตามแผนก" ของ amazon.com ใช้ div กว้าง คุณสามารถสร้าง div แบบกว้างและซ่อนส่วนที่ถูกต้องได้

อัปเดต: ต้องใช้แท็ก B สำหรับชื่อเรื่องเนื่องจากใน IE11 คลาสหลอก i: after ไม่แสดงเมื่อฉันมี visibility: hidden

ในกรณีของฉันฉันต้องการจัดแนวช่องทำเครื่องหมาย / วิทยุอินพุต (ออกแบบเอง) ให้ตรงกับข้อความฉลากโดยที่ข้อความเป็นตัวหนาเมื่อเลือกอินพุต

วิธีแก้ปัญหาที่ให้ไว้ที่นี่ใช้ไม่ได้กับฉันใน Chrome การจัดตำแหน่งแนวตั้งของอินพุตและเลเบลยุ่งกับ: after psuedo class และ -margins ไม่ได้แก้ไขสิ่งนี้

นี่คือวิธีแก้ไขที่คุณจะไม่ประสบปัญหาในการจัดแนวตั้ง

/* checkbox and radiobutton */
label
{
    position: relative;
    display: inline-block;
    padding-left: 30px;
    line-height: 28px;
}

/* reserve space of bold text so that the container-size remains the same when the label text is set to bold when checked. */
label > input + b + i
{
    font-weight: bold;
    font-style: normal;
    visibility: hidden;
}

label > input:checked + b + i
{
    visibility: visible;
}

/* set title attribute of label > b */
label > input + b:after
{
    display: block;
    content: attr(title);
    font-weight: normal;
    position: absolute;
    left: 30px;
    top: -2px;
    visibility: visible;
}

label > input:checked + b:after
{
    display: none;
}

label > input[type="radio"],
label > input[type="checkbox"]
{
    position: absolute;
    visibility: hidden;
    left: 0px;
    margin: 0px;
    top: 50%;
    transform: translateY(-50%);
}

    label > input[type="radio"] + b,
    label > input[type="checkbox"]  + b
    {
        display: block;
        position: absolute;
        left: 0px;
        margin: 0px;
        top: 50%;
        transform: translateY(-50%);
        width: 24px;
        height: 24px;
        background-color: #00a1a6;
        border-radius: 3px;
    }

    label > input[type="radio"] + b
    {
        border-radius: 50%;
    }

    label > input:checked + b:before
    {
        display: inline-block;
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%) rotate(45deg);
        content: '';
        border-width: 0px 3px 3px 0px;
        border-style: solid;
        border-color: #fff;
        width: 4px;
        height: 8px;
        border-radius: 0px;
    }

    label > input[type="checkbox"]:checked + b:before
    {
        transform: translate(-50%, -60%) rotate(45deg);
    }

    label > input[type="radio"]:checked + b:before
    {
        border-width: 0px;
        border-radius: 50%;
        width: 8px;
        height: 8px;
    }

<label><input checked="checked" type="checkbox"/><b title="Male"></b><i>Male</i></label>
<label><input type="checkbox"/><b title="Female"></b><i>Female</i></label>