10 ตัวอย่างที่ดีที่สุดของ CSS สำหรับการออกแบบตัวอักษรที่น่าทึ่ง
เผยแพร่แล้ว: 2018-11-13แบบอักษรเปลี่ยนการรับรู้หรือการออกแบบของคุณ หากคุณเลือกแบบอักษรที่เหมาะสมโดยมีน้ำหนักแบบอักษรที่เหมาะสม ความสูงของบรรทัด ขนาด และสี ตลอดจนช่องว่างภายในและตำแหน่งที่สมบูรณ์แบบ นี่ถือเป็นความสำเร็จ 50% แล้ว
หากคุณใช้งานเว็บไซต์บน WordPress คุณสามารถใช้แท็บ CSS เพิ่มเติมใน Live Customizer เพื่อแทรก CSS ที่กำหนดเองและเปลี่ยนลักษณะที่ปรากฏขององค์ประกอบที่แน่นอนของธีม WP ของคุณ รวมถึงโลโก้ ข้อความในบทความของคุณ สีพื้นหลังของหน้าโพสต์ ฯลฯ
ฉันได้รวบรวมข้อมูลโค้ดการพิมพ์จำนวนหนึ่งที่คุณสามารถใช้เป็น CSS ที่กำหนดเองในเครื่องมือปรับแต่งของคุณเพื่อเปลี่ยนรูปลักษณ์ของโลโก้เว็บไซต์ของคุณ ในตารางใต้สแนปชอตแต่ละอัน คุณจะเห็น CSS ดั้งเดิม แต่สแน็ปช็อตเองแสดงให้เห็นว่าฉันได้เปลี่ยนขนาดฟอนต์เล็กน้อยเพื่อให้เข้ากับโลโก้ของฉัน ดังนั้นสนุก!
เมืองที่ถูกฝัง
ชั่วโมง1 { สี: #231900; ตระกูลแบบอักษร: 'Open Sans'; ขนาดตัวอักษร: 94px; ตัวอักษร-น้ำหนัก: 800; ตัวอักษรเว้นวรรค: -2px; ความสูงของบรรทัด: 84px; ระยะขอบล่าง: 72px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } พี { สี: #231900; ตระกูลแบบอักษร: 'ข้อความสีแดงเข้ม'; ขนาดตัวอักษร: 34px; ตัวอักษร-น้ำหนัก: 500; ความสูงของบรรทัด: 48px; ระยะขอบล่าง: 48px; ความกว้างสูงสุด: 650px; } ก { สี: #231900; } เป็น: โฮเวอร์ { } |
ควีนส์ทาวน์
ชั่วโมง1 { สี: #111; ตระกูลแบบอักษร: 'Amaranth'; ขนาดตัวอักษร: 60px; ตัวอักษร-น้ำหนัก: 900; ความสูงของบรรทัด: 60px; ระยะขอบล่าง: 60px; padding-ซ้าย: 100px; ตำแหน่ง: ญาติ; } ชั่วโมง1:ก่อน{ พื้นหลัง: #111; เนื้อหา: ''; แสดง: บล็อก; ความสูง: 60px; ซ้าย: 0px; ตำแหน่ง: สัมบูรณ์; ด้านบน: 10px; ความกว้าง: 6px; } พี { สี: #444; ตระกูลแบบอักษร: 'Open Sans'; ขนาดตัวอักษร: 18px; ตัวอักษร-น้ำหนัก: 500; ความสูงของบรรทัด: 36px; ข้อความเยื้อง: 36px; ระยะขอบซ้าย: 100px; } ก { สี: #0abfdc; font-weight: ตัวหนา; } เป็น: โฮเวอร์ { สี: #111; } |
ซองจดหมาย
ชั่วโมง1 { สี: #ffff; ตระกูลแบบอักษร: 'Cormorant Garamond'; ขอบล่าง: 3px ทึบ #e66c7e; ขนาดตัวอักษร: 48px; ตัวอักษร-น้ำหนัก: 400; ความสูงของบรรทัด: 72px; ตัวอักษรเว้นวรรค: 35px; ระยะขอบล่าง: 57px; จัดข้อความ: ศูนย์; ข้อความเยื้อง: 24px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } พี { สี: #ffff; ตระกูลแบบอักษร: 'Cormorant Garamond'; ขนาดตัวอักษร: 28px; รูปแบบตัวอักษร: ตัวเอียง; ตัวอักษร-น้ำหนัก: 400; ความสูงของบรรทัด: 48px; ความกว้างสูงสุด: 640px; ระยะขอบ: 0 อัตโนมัติ 48px; จัดข้อความ: ศูนย์; } ก { สี: #e66c7e; ขอบล่าง: 2px ทึบ #e66c7e; ตระกูลแบบอักษร: 'Cormorant Garamond'; ขนาดตัวอักษร: 16px; ตัวอักษร-น้ำหนัก: 700; ตัวอักษรเว้นวรรค: 3px; ตกแต่งข้อความ: ไม่มี; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } เป็น: โฮเวอร์ { สี: #ffff; ขอบล่าง: 2px ทึบ #fff; } |
ทราย
ชั่วโมง1 { สี: #252010; ตระกูลแบบอักษร: 'Expletus Sans'; ขนาดตัวอักษร: 48px; ตัวอักษร-น้ำหนัก: 400; ความสูงของบรรทัด: 60px; ระยะขอบล่าง: 48px; ตัวอักษรเว้นวรรค: -1px; การแปลงข้อความ: ไม่มี; } พี { สี: #40371D; ตระกูลแบบอักษร: 'Dosis'; ขนาดตัวอักษร: 22px; ตัวอักษร-น้ำหนัก: 400; ความสูงของบรรทัด: 36px; ระยะขอบล่าง: 36px; } ก { สี: #5cd8b6; } เป็น: โฮเวอร์ { } |
Ardella
h1 { สี: #d54d7b; font-family: "Great Vibes", ตัวสะกด; ขนาดตัวอักษร: 165px; ความสูงของบรรทัด: 160px; ตัวอักษร-น้ำหนัก: ปกติ; ระยะขอบล่าง: 0px; ขอบบน: 40px; จัดข้อความ: ศูนย์; ข้อความเงา: 0 1px 1px #fff; } พี { สี: #7a7c7f; ขนาดตัวอักษร: 29px; ตระกูลแบบอักษร: "Libre Baskerville", serif; ความสูงของบรรทัด: 45px; จัดข้อความ: ศูนย์; ข้อความเงา: 0 1px 1px #fff; ช่องว่างภายใน: 20px; } p.byline { font-style: ตัวเอียง; สี: #B6B6B6; ขนาดตัวอักษร: 24px; ขอบบน: 20px; จัดข้อความ: ศูนย์; ข้อความเงา: 0 1px 1px #fff; } |
นกยูง
h1 { สี: # CEF0D4; ตระกูลแบบอักษร: 'Rouge Script', ตัวสะกด; ขนาดตัวอักษร: 130px; ตัวอักษร-น้ำหนัก: ปกติ; ความสูงของบรรทัด: 48px; ระยะขอบ: 0 0 50px; จัดข้อความ: ศูนย์; ข้อความเงา: 1px 1px 2px #082b34; } h2 { สี: #a7e8f8; ตระกูลแบบอักษร: 'Julius Sans One', sans-serif; ขนาดตัวอักษร: 22px; font-weight: ตัวหนา; ความสูงของบรรทัด: 32px; ระยะขอบ: 0 0 24px; ข้อความเงา: 1px 1px 1px #082b34; } พี { สี: #FFFFFF; ตระกูลแบบอักษร: 'Carme', sans-serif; ขนาดตัวอักษร: 16px; ความสูงของบรรทัด: 24px; ระยะขอบ: 0 0 24px; } { สี: #CEF0D4; ตกแต่งข้อความ: ขีดเส้นใต้; } a: โฮเวอร์ { สี: #a7e8f8; ตกแต่งข้อความ: ขีดเส้นใต้; } |
ตัวหนา

h1 { สี: #111; ตระกูลแบบอักษร: 'Helvetica Neue', sans-serif; ขนาดตัวอักษร: 275px; font-weight: ตัวหนา; ตัวอักษรเว้นวรรค: -1px; ความสูงของเส้น: 1; จัดข้อความ: ศูนย์; } h2 { สี: #111; ตระกูลแบบอักษร: 'Open Sans', sans-serif; ขนาดตัวอักษร: 30px; ตัวอักษร-น้ำหนัก: 300; ความสูงของบรรทัด: 32px; ระยะขอบ: 0 0 72px; จัดข้อความ: ศูนย์; } พี { สี: #685206; ตระกูลแบบอักษร: 'Helvetica Neue', sans-serif; ขนาดตัวอักษร: 14px; ความสูงของบรรทัด: 24px; ระยะขอบ: 0 0 24px; text-align: จัดชิดขอบ; text-justify: ระหว่างคำ; } |
ความจริง
h1 (สี: #b48608; ตระกูลแบบอักษร: 'Droid serif', serif; ขนาดตัวอักษร: 36px; ตัวอักษร-น้ำหนัก: 400; รูปแบบตัวอักษร: ตัวเอียง; ความสูงของบรรทัด: 44px; ระยะขอบ: 0 0 12px; จัดข้อความ: ศูนย์; } พี { สี: #eee; ตระกูลแบบอักษร: 'Droid Sans', sans-serif; ขนาดตัวอักษร: 15px; ตัวอักษร-น้ำหนัก: 400; ความสูงของบรรทัด: 24px; ระยะขอบ: 0 0 14px; } ก { สี: #b48608; ตกแต่งข้อความ: ไม่มี; ขอบล่าง: 1px ของแข็ง #4c3a07; } a: โฮเวอร์ { สี: #fff; พื้นหลัง: #b48608; } .date { border-top: 1px solid #fff; ตำแหน่ง: ญาติ; ด้านบน: 20px; ระยะขอบล่าง: 30px; } .date span (สี: #000; ตกแต่งข้อความ: ไม่มี; รูปแบบตัวอักษร: ตัวเอียง; ขนาดตัวอักษร: 13px; จัดข้อความ: ศูนย์; ช่องว่างภายใน: 2px 5px; พื้นหลัง: #fff; ความกว้าง: 120px; ระยะขอบ: 0 อัตโนมัติ; แสดง: บล็อก; ตำแหน่ง: ญาติ; ด้านบน: -10px; ตระกูลแบบอักษร: "Droid serif", serif; } a.btn { ตระกูลแบบอักษร: 'Droid serif', serif; พื้นหลัง: #b48608; ช่องว่างภายใน: 4px 7px; สี: #000; ตกแต่งข้อความ: ไม่มี; ระยะขอบ: 0 อัตโนมัติ; ความกว้าง: 100%; ความกว้าง: 120px; ระยะขอบ: 0 อัตโนมัติ; แสดง: บล็อก; จัดข้อความ: ศูนย์; รูปแบบตัวอักษร: ตัวเอียง; } a.btn:โฮเวอร์ { สี: #000; พื้นหลัง: #fff; } .left { ลอย: ซ้าย; มาร์จิ้น: 0 5% 30px 0; ความกว้าง: 30%; } .right { ลอย: ขวา; ระยะขอบ: 0 0 30px 0; ความกว้าง: 30%; } |
Don't Taste Me Bro
h1 { สี: #ffffff; ตระกูลแบบอักษร: 'Raleway',sans-serif; ขนาดตัวอักษร: 62px; ตัวอักษร-น้ำหนัก: 800; ความสูงของบรรทัด: 72px; ระยะขอบ: 0 0 24px; จัดข้อความ: ศูนย์; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } h2 { สี: #ffffff; ตระกูลแบบอักษร: 'Raleway',sans-serif; ขนาดตัวอักษร: 30px; ตัวอักษร-น้ำหนัก: 800; ความสูงของบรรทัด: 36px; ระยะขอบ: 0 0 24px; จัดข้อความ: ศูนย์; } พี { สี: #f8f8f8; ตระกูลแบบอักษร: 'Raleway',sans-serif; ขนาดตัวอักษร: 18px; ตัวอักษร-น้ำหนัก: 500; ความสูงของบรรทัด: 32px; ระยะขอบ: 0 0 24px; } { สี: #c8c8c8; ตกแต่งข้อความ: ขีดเส้นใต้; } a: โฮเวอร์ { สี: #1c1c1c; ตกแต่งข้อความ: ขีดเส้นใต้; } |
Sans สมัยใหม่
h1 { สี: #111; ตระกูลแบบอักษร: 'Open Sans Condensed', sans-serif; ขนาดตัวอักษร: 64px; ตัวอักษร-น้ำหนัก: 700; ความสูงของบรรทัด: 64px; มาร์จิ้น: 0 0 0; ช่องว่างภายใน: 20px 30px; จัดข้อความ: ศูนย์; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } h2 { สี: #111; ตระกูลแบบอักษร: 'Open Sans Condensed', sans-serif; ขนาดตัวอักษร: 48px; ตัวอักษร-น้ำหนัก: 700; ความสูงของบรรทัด: 48px; ระยะขอบ: 0 0 24px; ช่องว่างภายใน: 0 30px; จัดข้อความ: ศูนย์; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } พี { สี: #111; ตระกูลแบบอักษร: 'Open Sans', sans-serif; ขนาดตัวอักษร: 16px; ความสูงของบรรทัด: 28px; ระยะขอบ: 0 0 48px; } ก { สี: #990000; ตกแต่งข้อความ: ไม่มี; } a: โฮเวอร์ { การตกแต่งข้อความ: ขีดเส้นใต้ } .date (สี: #111; แสดง: บล็อก; ตระกูลแบบอักษร: 'Open Sans', sans-serif; ขนาดตัวอักษร: 16px; ตำแหน่ง: ญาติ; จัดข้อความ: ศูนย์; ดัชนี z: 1; } .date:before { ขอบบน: 1px ทึบ #111; เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ด้านบน: 12px; ซ้าย: 0; ความกว้าง: 100%; ดัชนี z: -1; } .ผู้เขียน { สี: #111; แสดง: บล็อก; ตระกูลแบบอักษร: 'Open Sans', sans-serif; ขนาดตัวอักษร: 16px; padding-ด้านล่าง: 38px; ตำแหน่ง: ญาติ; จัดข้อความ: ศูนย์; ดัชนี z: 1; } .author:before { ขอบบน: 1px ทึบ #111; เนื้อหา: ""; ตำแหน่ง: สัมบูรณ์; ด้านบน: 12px; ซ้าย: 0; ความกว้าง: 100%; ดัชนี z: -1; } .ช่วงวันที่ .author span { พื้นหลัง: #fdfdfd; ช่องว่างภายใน: 0 10px; การแปลงข้อความ: ตัวพิมพ์ใหญ่; } .line { border-top: 1px solid #111; แสดง: บล็อก; ขอบบน: 60px; แผ่นรองด้านบน: 50px; ตำแหน่ง: ญาติ; } .read-more { -moz-border-radius: 50%; -moz-transition: ง่ายต่อการเข้า - ออก 0.2 วินาที; -webkit-border-รัศมี: 50%; -webkit-transition: ง่ายต่อการเข้า - ออก 0.2 วินาที; พื้นหลัง: #111; รัศมีเส้นขอบ: 50%; เส้นขอบ: 10px ทึบ #fdfdfd; สี: #ffff; แสดง: บล็อก; ตระกูลแบบอักษร: 'Open Sans', sans-serif; ขนาดตัวอักษร: 14px; ความสูง: 80px; ความสูงของบรรทัด: 80px; ระยะขอบ: -40px 0 0 -40px; ตำแหน่ง: สัมบูรณ์; ด้านล่าง: 0px; ซ้าย: 50%; จัดข้อความ: ศูนย์; การแปลงข้อความ: ตัวพิมพ์ใหญ่; ความกว้าง: 80px; } .read-more: hover { พื้นหลัง: # 990000; ตกแต่งข้อความ: ไม่มี; } |
หวังว่าคุณจะชอบคอลเลกชัน
เมลานี เอช.