সিএসএস ফন্ট বর্ডার?

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 -1 px 1px কালো

— জাকুব এম।

দুর্দান্ত যদি আপনার কেবল 1px সীমানা প্রয়োজন হয়। 2px বা আরও বেশি ব্যবহার করার সময় এটি কুশ্রী হয়ে যায়।

— জুলুস কোলে

দ্রষ্টব্য: Andriod ব্রাউজার (কোড. google.com/p/android/issues/detail?id=7531 ) এর সাথে একটি বাগ রয়েছে , যদি আপনি "অস্পষ্ট "টিকে 0px হিসাবে সেট করেন তবে কোনও রূপরেখা একেবারেই উপস্থিত হবে না।

— মার্ক রোডস

বিটিডব্লিউ, আপনি ডাব্লু ৩ সি সিএসএস টিপ পৃষ্ঠায় এই কোডটি খুঁজে পেতে পারেন w3.org/Style/Example/007/text-shadow.en.html ( DRAWING LETTERS AS OUTLINESঅংশের অধীনে )

— লুইজেস 90

আমি এটি রঙিন পটভূমিতে সবচেয়ে ভাল কাজ করতে পেরেছি এবং @ পিক্সিলাসের উত্তর একটি চিত্রের পটভূমির সাথে সবচেয়ে ভাল কাজ করে

— SemanticZen

Answer 2

হালনাগাদ

স্ট্রোক উত্পন্ন করতে এখানে একটি এসসিএসএস মিক্সিন রয়েছে: 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 কালো সীমানা (আইই নয়) আমার এটি পূর্ববর্তী উত্তরগুলির তুলনায় আরও পরিষ্কার হওয়া দরকার তাই এটি "ফন্টফেস ফন্টগুলির জন্য প্রয়োজন ... আমি অবশ্যই প্রতিটি দিকের পিক্সেলদিকে নিই তা নিশ্চিত করার জন্য (প্রায়) কোনও ফাঁক নেই" ফাজি "(হ্যান্ড্রাউন বা অনুরূপ) ফন্টগুলি। সাবপিক্সেল (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 এর সদৃশ হওয়ার কারণে কোডটি আপডেট হয়েছে এবং এটি - / + উপাদানসমূহ। অস্পষ্টতা (0000 এর আগে 0) অপসারণ করা যেতে পারে তবে আমি 0 রাখার পরেও তা রাখি I সম্পাদনা। উপরের কোডটি কেন একটি সিএসএস কোড ন্যূনতম করা উচিত তবে এডিটিংয়ের জন্য লাইনে পৃথক পৃথক পৃথক করা দরকার এটি একটি উদাহরণ।

আমি 'ওয়েবেকিট-টেক্সট-স্ট্রোক' সম্পত্তি নিয়ে ঘুরেছি (মূলত ফন্টগুলি ইউজএইলজি ইউজিলি উইন্ডোগুলিকে আরও সুন্দর দেখানোর জন্য) তবুও এটি লোডিংয়ের সময়টিকে অনেক দীর্ঘ করে দিয়েছিল এবং এমনকি আমার সাইটের ক্র্যাক করে ফেলেছে (ম্যাক ক্রোম 16)। পৃষ্ঠাটি এমনকি লোড হতে পারে তার চেয়ে আমি দ্রুত এটিকে সরিয়েছি। আমি অনুমান করি এটি কেবলমাত্র ফন্টের একক লাইনগুলির জন্যই। (আমি এটি '

আপনি কি এর সাথে কোনও পারফরম্যান্স বেঞ্চমার্কিং করেছেন? স্ক্রোল করার সময় পৃষ্ঠাটি ছাঁটাইতে আমি পাঠ্য ছায়া খুঁজে পেয়েছি, উদাহরণস্বরূপ

— ক্রিস বসকো

আমি এটি একটি চিত্রের পটভূমিতে সেরা কাজ করে দেখেছি এবং @ নার্সিলিও ফিলহোর উত্তর রঙিন ব্যাকগ্রাউন্ডের সাথে সবচেয়ে ভাল কাজ করে

— SemanticZen

মূল কোডেপেন "অদৃশ্য হয়ে গেছে", তাই আমি এই পোস্ট থেকে মূল কোডটি দিয়ে একটি নতুন তৈরি করেছি এবং এখানে উল্লিখিত অন্যান্য সমাধানগুলির সাথে তুলনাও করেছি কোডেপেন.আইও

— গ্রিনিউয়ার /

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

ওয়েবেকিট-টেক্সট-স্ট্রোকের উল্লেখ করা কয়েকটি উত্তর সম্পর্কে আরও বিস্তারিতভাবে বর্ণনা করার জন্য, এটিকে কাজ করার জন্য এখানে কোড দেওয়া হল:

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

আমি একবার সেই বৃত্তাকার কোণগুলি করার চেষ্টা করেছি এবং CSS3 এর সাথে ছায়া ফেলেছি। পরে, আমি দেখতে পেলাম যে এটি এখনও খুব কম সমর্থিত (ইন্টারনেট এক্সপ্লোরার (গুলি) অবশ্যই!)

আমি জেএসে (আই ক্যানভাস সহ এইচটিএমএল ক্যানভাস) এটি করার চেষ্টা করে শেষ করেছিলাম, তবে এটি পারফরম্যান্সকে অনেকটা প্রভাবিত করে (এমনকি আমার সি 2 ডি মেশিনেও)। সংক্ষেপে, আপনার যদি সত্যিই এর প্রভাবের প্রয়োজন হয় তবে জেএস লাইব্রেরিগুলি বিবেচনা করুন (তাদের বেশিরভাগই আই 6 এ চালাতে সক্ষম হওয়া উচিত) তবে পারফরম্যান্স সমস্যার কারণে এটি শেষ করবেন না; আপনার যদি এখনও কোনও বিকল্পের প্রয়োজন হয় ... আপনি এসএফআইআর ব্যবহার করতে পারেন, তবে এটি পিএস করুন এবং এটি এসফাইআর করুন। 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;
}