सीएसएस फ़ॉन्ट बॉर्डर?

Question

सभी नए CSS3 बॉर्डर सामान के साथ ( -webkit, ...) अब अपने फॉन्ट में बॉर्डर जोड़ना संभव है? (नीले ट्विटर लोगो के चारों ओर ठोस सफेद सीमा की तरह)। यदि नहीं, तो क्या कोई भी अति-बदसूरत हैक नहीं है जो सीएसएस / एक्सएचटीएमएल में इसे पूरा करेगा या क्या मुझे अभी भी फ़ोटोशॉप को आग लगाने की ज़रूरत है?

Answer 1

टेक्स्ट-स्ट्रोक नामक एक प्रायोगिक सीएसएस संपत्ति है , जो एक -webkit उपसर्ग के पीछे कुछ ब्राउज़रों पर समर्थित है ।

h1 {
    -webkit-text-stroke: 2px black; /* width and color */

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

एक और संभावित चाल संपत्ति का उपयोग करते हुए, सभी दिशाओं में प्रत्येक पर चार छाया, एक पिक्सेल का उपयोग करना होगा text-shadow:

h1 {
    /* 1 pixel black shadow to left, top, right and bottom */
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;

    font-family: sans; color: yellow;
}

<h1>Hello World</h1>

लेकिन यह 1 से अधिक पिक्सेल मोटाई के लिए धुंधला हो जाएगा।

Comments

यह मेरे लिए सही काम करता है, मैंने केवल 1px "कलंक" जोड़ा: पाठ-छाया: -1px 0 1px काला, 0 1px 1px काला, 1px 0 1px काला, 0 -1px 1px काला

— जैकब एम।

महान यदि आपको केवल 1px सीमा की आवश्यकता है। लेकिन यह 2px या अधिक का उपयोग करते समय बदसूरत हो जाता है।

— जूल्स कोल

नोट: एंड्रायड ब्राउज़र ( code.google.com/p/android/issues/detail?id=7531 ) के साथ एक बग है , यदि आप "ब्लर" को 0px पर सेट करते हैं, तो कोई भी रूपरेखा प्रकट नहीं होती है।

— मार्क रोड्स

btw, आप इस कोड को W3C CSS टिप पेज w3.org/Style/Examples/007/text-shadow.en.html ( DRAWING LETTERS AS OUTLINESभाग के तहत ) में देख सकते हैं

— luiges90

मैंने पाया है कि यह एक रंग की पृष्ठभूमि पर सबसे अच्छा काम करता है और @ pixelass का जवाब एक छवि पृष्ठभूमि के साथ सबसे अच्छा काम करता

— SemanticZen

Answer 2

अपडेट करें

यहाँ स्ट्रोक उत्पन्न करने के लिए SCSS मिक्सिन है: http://codepen.io/pixelass/pen/gbGZYL

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
@function stroke($stroke, $color) {
  $shadow: ();
  $from: $stroke*-1;
  @for $i from $from through $stroke {
   @for $j from $from through $stroke {
      $shadow: append($shadow, $i*1px $j*1px 0 $color, comma);
    }
  }
  @return $shadow;
}
/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {Style}           - text-shadow
@mixin stroke($stroke, $color) {
  text-shadow: stroke($stroke, $color);
}

हाँ पुराना सवाल .. स्वीकृत (और अच्छे) उत्तरों के साथ ।।

लेकिन ... मामले में किसी को भी कभी भी इसकी जरूरत है और कोड टाइप करने से नफरत है ...

यह क्रॉसब्रोसर समर्थन के साथ 2px का ब्लैक बॉर्डर है (IE नहीं) मुझे @fontface फोंट के लिए इसकी आवश्यकता थी इसलिए इसे पहले देखे गए उत्तर की तुलना में क्लीनर होने की आवश्यकता थी ... मैं यह सुनिश्चित करने के लिए हर पक्ष के पिक्सेलवाइज़ लेता हूं कि (लगभग) कोई अंतराल नहीं है " फजी "(हैंड्रन या समान) फोंट। Subpixels (0.5px) जोड़ा जा सकता है लेकिन मुझे इसकी आवश्यकता नहीं है।

सिर्फ सीमा के लिए लंबा कोड ??? ...हाँ!!!

text-shadow: 1px 1px 0 #000,
    -1px 1px 0 #000,
    1px -1px 0 #000,
    -1px -1px 0 #000,
    0px 1px 0 #000,
    0px -1px 0 #000,
    -1px 0px 0 #000,
    1px 0px 0 #000,
    2px 2px 0 #000,
    -2px 2px 0 #000,
    2px -2px 0 #000,
    -2px -2px 0 #000,
    0px 2px 0 #000,
    0px -2px 0 #000,
    -2px 0px 0 #000,
    2px 0px 0 #000,
    1px 2px 0 #000,
    -1px 2px 0 #000,
    1px -2px 0 #000,
    -1px -2px 0 #000,
    2px 1px 0 #000,
    -2px 1px 0 #000,
    2px -1px 0 #000,
    -2px -1px 0 #000;

Comments

0 2px 0 # 000 के डुप्लिकेट के कारण कोड को अपडेट किया और यह - / + तत्व है। धब्बा (0 से पहले 000) हटाया जा सकता है, लेकिन मैं इसे रखने के लिए जाते हैं, भले ही यह 0. है। मुझे यह भी ध्यान रखना चाहिए कि उत्पादन साइटों पर आपके कोड का एक छोटा या संकुचित सीएसएस संस्करण रखने की सिफारिश की गई है और इसके लिए एक टिप्पणी असंपीड़ित संस्करण रखें संपादन। उपरोक्त कोड एक अच्छा उदाहरण है कि क्यों एक सीएसएस कोड को छोटा किया जाना चाहिए लेकिन संपादन के लिए लाइन द्वारा लाइन को अलग करने की आवश्यकता है।

मैंने '-webkit-text-स्ट्रोक' प्रॉपर्टी के साथ खेला (मुख्य रूप से फोंट बनाने के लिए केवल UGLY UGLY विंडो पर अच्छे लग रहे हैं) फिर भी इसने लोडिंग समय को बहुत लंबा कर दिया और यहां तक ​​कि मेरी साइट (मैक क्रोम 16) को भी क्रैश कर दिया। इसलिए मैंने इसे तेजी से हटा दिया, जिससे पेज लोड भी हो सके। मुझे लगता है कि यह केवल फोंट की एकल लाइनों के लिए अभिप्रेत है। (मैं इसे 'बॉडी' के लिए इस्तेमाल कर रहा था)

क्या आपने इसके साथ कोई प्रदर्शन बेंचमार्किंग किया है? मैंने स्क्रॉल करते समय पेज को नीचे करने के लिए टेक्स्ट शैडो पाया है, उदाहरण के लिए

— क्रिस बोस्को

मैं एक छवि की पृष्ठभूमि पर और @ इस काम करता है सबसे अच्छा Narcélio फिल्हो का जवाब एक रंग की पृष्ठभूमि के साथ सबसे अच्छा काम करता मिल गया है

— SemanticZen

मूल कोडपेन "गायब हो गया", इसलिए मैंने इस पोस्ट से मूल कोड के साथ एक नया बनाया और यहां बताए गए अन्य समाधानों की तुलना भी की यहां कोडपेन

— Grienauer/

Answer 3

आप शायद एक पाठ-स्ट्रोक का अनुकरण कर सकते हैं , css text-shadow(या -webkit-text-shadow/ -moz-text-shadow) और बहुत कम ब्लर का उपयोग करके :

#element
{
  text-shadow: 0 0 2px #000; /* horizontal-offset vertical-offset 'blur' colour */
  -moz-text-shadow: 0 0 2px #000;
  -webkit-text-shadow: 0 0 2px #000;
}

लेकिन जब यह -webkit-text-strokeसंपत्ति की तुलना में अधिक व्यापक रूप से उपलब्ध है , तो मुझे संदेह है कि यह आपके अधिकांश उपयोगकर्ताओं के लिए उपलब्ध है, लेकिन यह एक समस्या नहीं हो सकती (सुंदर गिरावट, और वह सब)।

Comments

यह ध्यान दिया जाना चाहिए कि किसी भी तरह का कोई धब्बा नहीं होने के लिए तीसरे तर्क को पूरी तरह से छोड़ना संभव है।

— फ्रांस्वा फ्युगेस

Answer 4

कुछ जवाबों पर अधिक विस्तार से उल्लेख करने के लिए -webkit-text-स्ट्रोक, यहाँ यह काम करने के लिए कोड है:

div {
  -webkit-text-fill-color: black;
  -webkit-text-stroke-color: red;
  -webkit-text-stroke-width: 2.00px; 
}

टेक्स्ट स्ट्रोक का उपयोग करने के बारे में एक गहन लेख यहां है और पाठ स्ट्रोक का समर्थन करने वाले ब्राउज़रों की एक सूची यहां है ।

Answer 5

एक 'टेक्स्ट-स्ट्रोक' संपत्ति लगती है, लेकिन (कम से कम मेरे लिए) यह केवल सफारी में काम करती है।

http://webkit.org/blog/85/introducing-text-stroke/

Answer 6

यहाँ मैं उपयोग कर रहा हूँ:

.text_with_1px_border
{
    text-shadow: 
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000;
}

.text_with_2px_border
{
    text-shadow: 
        /* first layer at 1px */
        -1px -1px 0px #000,
         0px -1px 0px #000,
         1px -1px 0px #000,
        -1px  0px 0px #000,
         1px  0px 0px #000,
        -1px  1px 0px #000,
         0px  1px 0px #000,
         1px  1px 0px #000,
        /* second layer at 2px */
        -2px -2px 0px #000,
        -1px -2px 0px #000,
         0px -2px 0px #000,
         1px -2px 0px #000,
         2px -2px 0px #000,
         2px -1px 0px #000,
         2px  0px 0px #000,
         2px  1px 0px #000,
         2px  2px 0px #000,
         1px  2px 0px #000,
         0px  2px 0px #000,
        -1px  2px 0px #000,
        -2px  2px 0px #000,
        -2px  1px 0px #000,
        -2px  0px 0px #000,
        -2px -1px 0px #000;
}

Answer 7

एक कम मिश्रण के साथ स्ट्रोक-चरित्र

यहाँ स्ट्रोक उत्पन्न करने के लिए एक कम मिश्रण है: http://codepen.io/anon/pen/BNYGBy?editors=110

/// Stroke font-character
/// @param  {Integer} $stroke - Stroke width
/// @param  {Color}   $color  - Stroke color
/// @return {List}            - text-shadow list
.stroke(@stroke, @color) {
  @maxi: @stroke + 1;
  .i-loop (@i) when (@i > 0) {
    @maxj: @stroke + 1;
    .j-loop (@j) when (@j > 0) {
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(1px) 0 @color;
      text-shadow+: (@i - 1)*(1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(-1px) 0 @color;
      text-shadow+: (@i - 1)*(-1px)  (@j - 1)*(1px) 0 @color;
      .j-loop(@j - 1);
    }
    .j-loop (0) {}
    .j-loop(@maxj);
    .i-loop(@i - 1);
  }
  .i-loop (0) {}
  .i-loop(@maxi);
  text-shadow+: 0 0 0 @color;
}

(यह पिक्सेलस जवाब पर आधारित है कि इसके बजाय एससीएसएस का उपयोग करता है)

Answer 8

text-shadow:
    1px  1px 2px black,
    1px -1px 2px black,
   -1px  1px 2px black,
   -1px -1px 2px black;

Answer 9

मैंने त्वरित अवलोकन करने के लिए यहां वर्णित सभी समाधानों की तुलना की है:

<h1>with mixin</h1>
<h2>with text-shadow</h2>
<h3>with css text-stroke-width</h3>

https://codepen.io/Grienauer/pen/GRRdRJr

Answer 10

मैंने एक बार सीएसएस 3 के साथ उन गोल कोनों और ड्रॉप शैडो को करने की कोशिश की। बाद में, मैंने पाया कि यह अभी भी खराब समर्थित है (इंटरनेट एक्सप्लोरर), निश्चित रूप से!

मैंने जेएस (HTML कैनवस के साथ HTML कैनवास) में ऐसा करने की कोशिश की, लेकिन यह प्रदर्शन को बहुत प्रभावित करता है (यहां तक ​​कि मेरी C2D मशीन पर भी)। संक्षेप में, यदि आपको वास्तव में प्रभाव की आवश्यकता है, तो जेएस पुस्तकालयों पर विचार करें (उनमें से अधिकांश IE6 पर चलने में सक्षम होना चाहिए) लेकिन प्रदर्शन के मुद्दों के कारण इसे खत्म न करें; यदि आपको अभी भी एक विकल्प की आवश्यकता है ... आप SFiR का उपयोग कर सकते हैं, तो PS इसे और SFiR इसे। CSS3 आज तैयार नहीं है।

Answer 11

क्षमा करें, मुझे देर हो गई है, लेकिन पाठ-छाया के बारे में बोलते हुए, मैंने सोचा कि आप भी इस उदाहरण को पसंद करेंगे (जब मैं पाठ पर अच्छी छाया की आवश्यकता होती है तो मैं इसका उपयोग अक्सर करता हूं):

                    text-shadow: -2px   -2px lightblue,
                                 -2px -1.5px lightblue,
                                 -2px   -1px lightblue,
                                 -2px -0.5px lightblue,
                                 -2px    0px lightblue,
                                 -2px  0.5px lightblue,
                                 -2px    1px lightblue,
                                 -2px  1.5px lightblue,
                                 -2px    2px lightblue,
                               -1.5px    2px lightblue,
                                 -1px    2px lightblue,
                               -0.5px    2px lightblue,
                                  0px    2px lightblue,
                                0.5px    2px lightblue,
                                  1px    2px lightblue,
                                1.5px    2px lightblue,
                                  2px    2px lightblue,
                                  2px  1.5px lightblue,
                                  2px    1px lightblue,
                                  2px  0.5px lightblue,
                                  2px    0px lightblue,
                                  2px -0.5px lightblue,
                                  2px   -1px lightblue,
                                  2px -1.5px lightblue,
                                  2px   -2px lightblue,
                                1.5px   -2px lightblue,
                                  1px   -2px lightblue,
                                0.5px   -2px lightblue,
                                  0px   -2px lightblue,
                               -0.5px   -2px lightblue,
                                 -1px   -2px lightblue,
                               -1.5px   -2px lightblue;
}