it-swarm.dev

كيفية تطبيق تأثيرات الخط لمكافحة الاسم المستعار في CSS؟

كيف يمكننا أن نطبق خطوط تشبه الخط مثل Photoshop ، حاد ، قوي ، سلس في CSS؟

هل تدعمها جميع المتصفحات؟

48
Mehar

هنا تذهب سيدي :-)

1

.myElement{
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

2

.myElement{
    text-shadow: rgba(0,0,0,.01) 0 0 1px;
}
96
Gildas.Tambo

الجواب القصير: أنت لا تستطيع.

لا تحتوي CSS على تقنيات تؤثر على تقديم الخطوط في المستعرض ؛ فقط النظام يمكنه فعل ذلك.

من الواضح ، يمكن تحقيق وضوح النص بسهولة من خلال شاشات كثيفة البكسل ، ولكن إذا كنت تستخدم جهاز كمبيوتر عاديًا ، فسيكون من الصعب تحقيقه.

هناك بعض الخطوط الأحدث التي تتسم بالسلاسة ولكن يبدو أن التضحية بها غير واضحة إلى حد ما (انظر إلى معظم خطوط Adobe ، على سبيل المثال). يمكنك أيضًا العثور على بعض الخطوط السلسة ولكن الضبابية حسب التصميم على Google Fonts .

هناك بعض تقنيات CSS3 الجديدة لتقديم الخطوط وتأثيرات النص على الرغم من أن تناسق هذه التقنيات وأدائها وموثوقيتها يختلفان إلى حد كبير لدرجة أنه لا ينبغي عليك الاعتماد عليها كثيرًا بشكل عام.

8
Jace Cotton

يعمل الأفضل. إذا كنت ترغب في استخدامه sitewide ، دون الحاجة إلى إضافة بناء الجملة هذا إلى كل فئة أو معرف ، أضف CSS التالي إلى نص css الخاص بك:

body { 
    -webkit-font-smoothing: antialiased;
    text-shadow: 1px 1px 1px rgba(0,0,0,0.004);
    background: url('./images/background.png');
    text-align: left;
    margin: auto;

}
7
user3267537